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

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 边框是从当前 hover 旁边的另一个 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 .