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 - 下拉菜單中更改顏色，而徘徊在子菜單項

回答

相關問題