Css 边框底部显示在顶部

我如何解决这个问题：

.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;
}

---

我一直在玩它，但似乎找不到我的错误。我在这里发布了css，但JSFIDLE也包含了整个html。

您所需要的就是从.dbordermenulist对这行css进行注释

margin-bottom: -10px;

这让你的线稍微高一点，看起来他们是交叉的

---

希望有帮助。

您正在使用.dbordermenulist类对所有div元素应用负边距。移除这些元素的底部边距：-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 */
}

这是一个

---

此外，在li元素和div元素上都应用了一个底部边框，从而创建了双边框效果。您可能希望这样做，但如果不是这样，那就是原因

在项目上有两个底部边框，其中的li和div具有负填充和边距，使它们向上移动。删除负底部css和我会工作：删除你的边缘底部：-10px；找出另一个解决方案。你正在搞乱填充和边距。您可以将其重置为零，然后如果需要，将其调整到您的需要负填充不受支持为什么它在JSFIDLE上工作而在我的Pete上不工作？完全相同的事情…@user3451555通过将填充和边距重置为零从clean重新启动到&，负填充不起作用，负：边距减少元素所需的空间，以便谨慎使用。通过完全重置，您可以轻松设置真正需要的填充和边距：