Question

也许标题不代表我想知道的内容，但无论如何，这里是demo

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

我想要完成的是，当悬停第一个或最后一个项目以扩展background-color以覆盖那个白色（ish）圆形边框时

我试图添加：

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

没有太大的努力让它发挥作用（所以我没有调整太多的值）而且我或多或少地实现了我的目标，而不是损失圆形边框

当然，我可以挖掘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 {

中删除填充

＆＃13;

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

＆＃13;

<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>

＆＃13;

展开列表项背景颜色：悬停Bootstrap下拉列表

2 个答案: