Question

我创建了一个CSS下拉菜单，可在此处查看：http://jsfiddle.net/7ZWnJ/并在下方粘贴代码。

无论如何我可以让下拉部分有不同的背景颜色（例如：红色），但主标题保持橙色？

非常感谢，

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">   
    <head>
        <style>
            #brands {
                height: 430px;
                overflow-y:auto;
                overflow-x:hidden;
                position: absolute;
                width: 460px;
                z-index: 123;
            }
            #menu {
                z-index: 999;
            }
            ul {
                font-family: Arial;
                font-size: 12px;
                margin: 0;
                padding: 0;
                list-style: none;
                font-weight: bold;
            }
            ul li {
                position: relative;
            }
            li ul {
                display: none;
                width: 133px;
            }
            ul li a {
                display: block;
                text-decoration: none;
                color: #ffffff;
                padding: 3px 15px 3px 15px;
                margin: 0;
                border-top: #f79448 1px solid;
                border-bottom: #f79448 1px solid;
            }
            ul li a:hover {
                z-index: 1000;
                background-color: #F79448;
            }
            li:hover ul {
                display: block;
                position: absolute;
                z-index: 1000;
                width: 134px;
                margin-left: -3px;
            }
            li:hover li {
                font-size: 12px;
            }
            li:hover a {
                background-color: #F79448;
            }
            li:hover li a:hover {
            }
        </style>
    </head>

    <body>
        <table border="0" cellpadding="3" cellspacing="0">
            <tr class="nav-links">
                <td width="128" height="18" align="center" bgcolor="#f79448">
                    <ul id="menu2">
                        <li class="2"><a href="#">OPTION 1</a>

                            <ul>
                                <li><a href="#">OPTION 2</a>
                                </li>
                                <li><a href="#">OPTION 3</a>
                                </li>
                                <li><a href="#">OPTION 4</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </td>
            </tr>
        </table>
    </body>
</html>

Answer 1

将以下内容添加到样式表中：

#menu2 li ul li a{background:#F00; border-color:#F00}

这是JSFiddle

Answer 2

通过CSS，最好的方法是给你标题li标记一个id并设置除标题之外的所有li项目颜色为红色。

但是，如果您想在标题更改时执行此操作，并且在JavaScript中，您可以跟踪哪个列表项是“head”，每次“head”更改时，都会相应地更改背景颜色。

Answer 3

鉴于您的菜单是无序列表（ul），您只需为要区分的元素添加不同的类（li）。

即。在CSS中：

li.diff {
    background-color: #FF0000;
}

在HTML中：

<li class="diff"><a href="#">OPTION 2</a></li>

下拉菜单与不同的背景

3 个答案: