2

这是我的问题，我正在制作一个带有下拉菜单的导航栏。我已经为列表中的所有 li 开设了课程。这是为此的CSS。

#menu li:hover {
    border: 1px solid #777777;
    padding: 4px 5px 4px 5px;
}

#menu li a {
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px; 
    color: #EEEEEE;
}

#menu li:hover a {
    color:#161616;
}

这是如何实现的。

<ul id="menu">
    <li><a href="#">Button 1</a></li>
    <li><a href="#">Button 2</a></li>
    <li><a href="#">Button 2</a></li>

我想使用上面的 css 创建一个名为 nodropdown 的类。这就是我格式化它的方式，但我认为我做得不对。

#menu li.nodropdown :hover {
    border: 1px solid #777777;
    padding: 4px 5px 4px 5px;
}

#menu li.nodropdown a {
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px; 
    color: #EEEEEE;
}

#menu li.nodropdown :hover a {
    color:#161616;
}

我希望能够像这样调用 nodropdown 类并覆盖 Button 2：

<ul id="menu">
    <li><a href="#">Button 1</a></li>
    <li class="nodropdown"><a href="#">Button 2</a></li> 
    <li><a href="#">Button 2</a></li>

但我不认为我在上面为 nodropdown 格式化类的方式是正确的吗？你能帮我纠正吗？

4

1 回答 1

2

分组的想法是将 CSS 类/ID 分组在一起，然后例如只列出一次公共属性。

/* Attributes for all boxes */
td.Box1, td.Box2, td.Box3 {padding: 3px 6px; font-weight: bold}

/* Unique box attributes */
td.Box1 {background: #fff}
td.Box2 {background: #000}
td.Box3 {background: #ccc}
于 2012-08-30T16:31:54.827 回答