Question

我有一个像这样的html导航栏：

<html>
  <nav class="mainMenu1">
    <ul class="menu">
      <li class="menu-item">
        <a href="#">Options</a>
        <ul class="sub-menu">
          <li>Option 1</li>
          ...
        </ul>
      </li>
    </ul>
  </nav>
</html>

我需要用class：menu-item更改li元素的背景颜色，而子菜单项（也是li）被鼠标悬停...这是我的css到目前为止：

nav.mainMenu1 ul li.active > a {
    background: #044668 !important; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#044668, #008bbc) !important; /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#044668, #008bbc) !important; /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#044668, #008bbc) !important; /* For Firefox 3.6 to 15 */
    background: linear-gradient(#044668, #008bbc) !important; /* Standard syntax */
}

Answer 1

在CSS中无法选择父元素或上一个选择器，但您可以使用:after伪元素

进行操作

＆＃13;

.menu-item{
  position: relative;
}

.sub-menu:after{
  content: '';
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  
  background: #044668 !important;
  /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(#044668, #008bbc) !important;
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#044668, #008bbc) !important;
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#044668, #008bbc) !important;
  /* For Firefox 3.6 to 15 */
  background: linear-gradient(#044668, #008bbc) !important;
  /* Standard syntax */
  

}

.sub-menu:hover:after{
  display: block;
}

＆＃13;

<nav class="mainMenu1">
  <ul class="menu">
    <li class="menu-item">
      <a href="#">Options</a>
      <ul class="sub-menu">
        <li>Option 1</li>
        <li>Option 2</li>
        <li>Option 3</li>
        <li>Option 4</li>
      </ul>
    </li>
  </ul>
</nav>

＆＃13;

CSS - 在悬停子菜单项时更改下拉菜单的颜色

1 个答案: