CSS - 下拉菜单中更改颜色，而徘徊在子菜单项

我有这样的HTML一个导航栏：CSS - 下拉菜单中更改颜色，而徘徊在子菜单项

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

我需要更改与类锂元素的背景颜色：菜单项，而子菜单项（也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 */ 
}

来源

2017-08-30 P. Avery

请更新你有完整的CSS问题。构建一个工作示例（snippet/jsfiddle）以显示您目前为止的内容。 – Dekel

在CSS中是没有办法选择的父元素或以前的选择，但你可以做一个技巧使用:after pseudoelement

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

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

来源

2017-08-30 22:48:58 Martirosian

CSS - 下拉菜单中更改颜色，而徘徊在子菜单项

回答

相关问题