Question

我该如何解决这个问题：

.dropdownmenulist li a:hover {
cursor: pointer;
color: #e27803;
}
.dropdownmenulist li a {
    text-decoration: none;
    color: #FFF;
    font-family: Arial, Helvetica, sans-serif;

    width: 203px;   
    font-size: 13px;
    text-shadow: 0px 1px #000000;
    text-indent: 3px;
    font-weight: 100;
    opacity: 1;

    display: block;

    -webkit-transition: color 0.2s ease-in-out;
    -moz-transition: color 0.2s ease-in-out;
    -o-transition: color 0.2s ease-in-out;
    -ms-transition: color 0.2s ease-in-out;
    transition: color 0.2s ease-in-out;
}
.dropdownmenulist {
    position: absolute;
    margin-left: 17px;
    height: 180px;
}
.dropdownmenulist li{
    border-bottom: thin dotted #888b8e;
    width: 203px;
    padding-bottom: -5px;
    margin-top:5px;
}
.dbordermenulist {
    overflow: auto;
 border-bottom: thin dotted rgba(50,50,52, .7);
 z-index: -1;
 left: 0px;
 width: 203px;
 left: 0px;
 margin-bottom: -10px;
}

http://jsfiddle.net/74AW4/

我一直在玩它，但似乎无法找到我的错误..我已经在这里发布了CSS，但jsfiddle也包含了整个HTML。

Answer 1

您只需要从.dbordermenulist

评论这行css

margin-bottom: -10px;

这会使你的线条略高于它，看起来它们正在交叉。

希望得到这个帮助。

Answer 2

您正在为所有div元素应用负余量，其类为.dbordermenulist。删除这些元素的margin-bottom: -10px，这将解决它。

.dbordermenulist {
    overflow: auto;
    border-bottom: thin dotted rgba(50,50,52, .7);
    z-index: -1;
    left: 0px;
    width: 203px;
    left: 0px;
    /* margin-bottom: -10px; Remove this */
}

这是example

此外，您的li元素和div元素都应用了底部边框，这会产生双边框效果。你可能想要那个，但如果不是那个原因

边框底部显示在上面

2 个答案: