CSS下拉菜單與不同顏色的

Question

我有一個CSS下拉菜單按以下方式工作：

<ul> 
<li><a href="#">Link 1</a> 
<ul> 
<li><a href="#">Monkey 1</a></li> 
<li><a href="#">Monkey 2</a></li> 
<li><a href="#">Monkey 3</a></li> 
</ul> 
</li> 
<li><a href="#">Link 2</a> 
<ul> 
<li><a href="#">Monkey 1</a></li> 
<li><a href="#">Monkey 2</a></li> 
<li><a href="#">Monkey 3</a></li> 
</ul> 
</li> 
<li> 
<a href="#">Link 3</a> 
<ul> 
<li><a href="#">Monkey 1</a></li> 
<li><a href="#">Monkey 2</a></li> 
<li><a href="#">Monkey 3</a></li> 
</ul> 
</li> 
<li><a href="#">Link 4</a></li> 
<li><a href="#">Link 5</a></li> 
<li><a href="#">Link 6</a></li> 
</ul> 

和CSS：

ul{ 
    padding: 0; 
    list-style: none; 
} 
ul li{ 
    float: left; 
    width: 100px; 
    text-align: center; 
} 
ul li a{ 
    display: block; 
    padding: 5px 10px; 
    color: #fff; 
    text-decoration: none; 
} 
ul li a:hover{ 
    color: #87a0b4; 
    background: #fff; 
} 
ul li ul{ 
    display: none; 
} 
ul li:hover ul{ 
    display: block; 
    position: absolute; 
    width: 100px; 
    z-index: 100; /* display the dropdown */ 
} 

這工作完全，但我想我的東西不同。我希望下拉菜單具有不同的背景和懸停顏色。我也希望下拉菜單與它的顯示偏移。我怎麼去做這件事？

Answer 1

您必須指定哪些元素要應用的風格變化。

這一個選擇第一個子菜單：

ul > li:first-child > ul > li a:hover{ 
    color: #87a0b4; 
    background: yellow; 
} 

這一個選擇第二個子菜單：

ul > li:nth-child(2) > ul > li a:hover{ 
    color: #87a0b4; 
    background: blue; 
} 

這一個改變Link1懸停顏色：

ul > li:first-child a:hover{ 
    color: #87a0b4; 
    background: blue; 
} 

您可以繼續申請任何你想要的效果。希望它能幫助:)

Answer 2

UL李 - 目標主菜單列表項

UL李UL李 - 目標的子菜單列表項

改變的子菜單的樣式。你可以使用這樣的東西。

ul li ul li { 
    background-color:red; 
} 
ul li ul li a { 
    color:green; 
} 

見http://jsfiddle.net/2Nh47/