CSSドロップダウンメニューの色を変更

Question

子メニュ​​ー項目をホバリングしながら、私はこのようなHTMLでナビゲーションバーを持っています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

が親要素または前のセレクタを選択する方法はありませんが、あなたは行うことができます：サブメニュー項目（また、Liは）マウスでホバーしている...ここに私のCSSはこれまでのところですトリックを使用して:after擬似要素

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