不同背景的下拉菜单答案

【问题标题】：Drop down menu with different background不同背景的下拉菜单
【发布时间】：2013-07-30 10:45:51
【问题描述】：

我创建了一个 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>

【问题讨论】：

标签： html css drop-down-menu stylesheet

【解决方案1】：

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

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

这是JSFiddle

【讨论】：

谢谢！像梦一样工作:-)
很高兴有帮助 (:

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

即在 CSS 中：

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

在 HTML 中：

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

【讨论】：