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

您可以继续并应用您想要的任何效果。希望它有所帮助：）

fiddle

Answer 2

ul li - 定位主菜单列表项目

ul li ul li - 定位子菜单列表项

更改子菜单的样式。你可以使用这样的东西。

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

请参阅http://jsfiddle.net/2Nh47/

CSS下拉菜单有不同的颜色

2 个答案: