Question

我有一个列表，然后我将其css设置为：

.dropdown-menu > li {
   list-style: none outside none;
   height: 22px;
   border-bottom: 1px dotted #e1e1e1;
   width: 178px;
   margin-left: 10px;
}

然后当鼠标悬停时：

.dropdown-menu > li > a:hover{
   color: #EC5B00 !important;
   z-index: 3;
   border-style: solid;
   border-color:#dddddd #ffffff #dddddd #dddddd;
   border-width: 1px 3px 1px 0px;
   width: 183px;
   background-color: #ffffff;
   margin-left: 1px;
}

问题：

即使我将边框设置为实心样式，但虚线仍然存在，因此有两条线（一条是虚线，另一条是实线）。如何通过css忽略鼠标悬停上的虚线？

非常感谢任何帮助，谢谢..

更新：

按照所有答案更改样式后，我发现一个问题，另一个dotted边框来自当前悬停li旁边的另一个li，此处为：http://jsfiddle.net/gbw3fj14/

Answer 1

border-bottom: 1px dotted #e1e1e1;样式设置为li，您稍后要更改a边框，尝试将选择器从li > a:hover更改为li:hover

.dropdown-menu > li {
    list-style: none outside none;
    height: 22px;
    border-bottom: 1px dotted #e1e1e1;
    width: 178px;
    margin-left: 10px;
}

.dropdown-menu > li:hover {
    color: #EC5B00 !important;
    z-index: 3;
    border-style: solid;
    border-color:#dddddd #ffffff #dddddd #dddddd;
    border-width: 1px 3px 1px 0px;
    width: 183px;
    background-color: #ffffff;
    margin-left: 1px;
}

<强> jsFiddle Demo

Answer 2

http://jsfiddle.net/

你写错了 .dropdown-menu＆gt; li> a：将鼠标悬停在.dropdown-menu＆gt;利：悬停

CSS在鼠标悬停时设置新的边框值

2 个答案: