展开的列表项的背景色：引导下拉

Question

的悬停也许称号并不代表我想知道是什么，但在任何情况下，这里的demo

悬停在单个元素打开一个下拉菜单。当悬停每个项目时，应用了一个非常明显的background-color。

什么，我想做到的是，徘徊在第一个或最后一个项目时，延长background-color覆盖白（ISH）圆角边框

我尝试添加：

.nav li ul li a:first-child:hover { 
    margin-top: -5px; 
    padding-top: 10px; 
    padding-bottom: 10px; 
} 

没有太多pretension得到它的工作（所以我没有调整太多的值），我或多或少地实现了我的目标，牺牲了丢失的圆形边框

当然，我可以挖Bootstrap CSS并找到确切的值的圆形边界和在这里重新应用它们，但总的来说，代码对我来说似乎是错误的。

我在正确的轨道上解决还是有更好的方法？

Answer 1

使用此：

.dropdown-menu { 
    padding: 0 !important; 
} 
.nav li ul li:first-child a { 
border-radius: 4px 4px 0 0; 
} 
.nav li ul li:last-child a { 
    border-radius: 0 0 4px 4px; 
} 

body { 
 
    background-color: blue; 
 
    padding: 100px; 
 
} 
 

 
.nav { 
 
    background-color: #EDEDED; 
 
    width: 200px; 
 
} 
 

 
    .nav li ul li a:hover { 
 
     background-color: red; 
 
     color: #FFF; 
 
    } 
 
    
 
    .nav ul li a { 
 
     padding: 10px 15px; 
 
    } 
 
.dropdown-menu { 
 
    padding: 0 !important; 
 
} 
 
     
 
.dropdown-menu .sub-menu { 
 
    left: 100%; 
 
    position: absolute; 
 
    top: 0; 
 
    visibility: hidden; 
 
    margin-top: -1px; 
 
} 
 

 
.dropdown-menu li:hover .sub-menu { 
 
    visibility: visible; 
 
} 
 

 
.dropdown:hover .dropdown-menu { 
 
    display: block; 
 
    top: -10px; 
 
    margin-right: -25%; 
 
} 
 
.nav li ul li:first-child a { 
 
    border-radius: 4px 4px 0 0; 
 
} 
 
.nav li ul li:last-child a { 
 
    border-radius: 0 0 4px 4px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<ul class="nav"> 
 

 
    <li class="dropdown" id="collection"> 
 
     <a class="dropdown-toggle" data-toggle="dropdown" href="#"> 
 
      <span class="fa fa-bars"></span> 
 
      Items 
 
     </a> 
 

 
     <ul class="dropdown-menu dropdown-menu-right sub-menu"> 
 
      <li> 
 
       <a href="#">Item</a> 
 
      </li> 
 
      <li> 
 
       <a href="#">Item</a> 
 
      </li> 
 
      <li> 
 
       <a href="#">Item</a> 
 
      </li> 
 
      <li> 
 
       <a href="#">Item</a> 
 
      </li> 
 
     </ul> 
 
    </li> 
 
</ul>

Answer 2

这足以从.dropdown:hover .dropdown-menu {

body { 
 
    background-color: blue; 
 
    padding: 100px; 
 
} 
 

 
.nav { 
 
    background-color: #EDEDED; 
 
    width: 200px; 
 
} 
 

 
.nav li ul li a:hover { 
 
    background-color: red; 
 
    color: #FFF; 
 
} 
 

 
.nav ul li a { 
 
    padding: 10px 15px; 
 
} 
 

 
.dropdown-menu .sub-menu { 
 
    left: 100%; 
 
    position: absolute; 
 
    top: 0; 
 
    visibility: hidden; 
 
    margin-top: -1px; 
 
} 
 

 
.dropdown-menu li:hover .sub-menu { 
 
    visibility: visible; 
 
} 
 

 
.dropdown:hover .dropdown-menu { 
 
    display: block; 
 
    top: -10px; 
 
    margin-right: -25%; 
 
    
 
    /* next line added */ 
 
    padding: 0em; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 

 

 
<ul class="nav"> 
 

 
    <li class="dropdown" id="collection"> 
 
     <a class="dropdown-toggle" data-toggle="dropdown" href="#"> 
 
      <span class="fa fa-bars"></span> 
 
      Items 
 
     </a> 
 

 
     <ul class="dropdown-menu dropdown-menu-right sub-menu"> 
 
      <li> 
 
       <a href="#">Item</a> 
 
      </li> 
 
      <li> 
 
       <a href="#">Item</a> 
 
      </li> 
 
      <li> 
 
       <a href="#">Item</a> 
 
      </li> 
 
      <li> 
 
       <a href="#">Item</a> 
 
      </li> 
 
     </ul> 
 
    </li> 
 
</ul>

取出填充