0

我目前正在尝试从嵌套的无序列表创建一个下拉菜单。我的菜单可以正常工作，但是我在样式方面遇到了一些问题。触发下拉菜单的整体链接是可点击的，并且需要有一个带有白色文本的蓝色背景，但是，下拉元素需要有一个从整个导航容器继承的灰色背景。我需要做的就是修改文本颜色，但是无论我尝试什么方法，它总是会修改下拉文本颜色以及标题链接颜色。

可以在下面找到我的 CSS 以及当前显示的示例和用于生成菜单的 html：

/*CSS*/

#coolMenu,
#coolMenu ul {
list-style: none;
}

#coolMenu {
float: right;
}

#coolMenu > li {
float: left;
}

#coolMenu li a {
display: block;
/*height: 2em;
line-height: 2em;
*/
/*padding: 0 1.5em;*/
text-decoration: none;
color: #ffffff;
 }

#coolMenu ul {
position: absolute;
display: none;
z-index: 999;
}

#coolMenu li:hover ul {
display: block;
}

.dropdown a li{
color: #124162 !important;
}

#style_me > li > a{
color: #124162 !important;
}

/ HTML /

      <nav id="navigation" class="navigation">

        <ul>
            <li class="current"><a href="#">Home</a></li>
            <li><a href="#">Who Are We?</a></li>
            <li><a href="#">Why Join Us?</a></li>
            <li><a href="#">Contact Us</a></li>
        </ul>


   /* This is the menu element that needs styling */

        <ul id="coolMenu">
                             /* THis should be blue background white text */
            <li><a href="#" class="donate">Login / Register</a>
                <ul id="style_me">
                     /* These should be grey background blue text */
                                        <li><a href="#">Link 1</a></li>
                                        <li><a href="#">Link 2</a></li>
                                        <li><a href="#">Link 3</a></li>
                                        <li><a href="#">Link 4</a></li>
                                        <li><a href="#">Link 5</a></li>
                                        <li><a href="#">Link 6</a></li>
                                        <li><a href="#">Link 7</a></li>
                                    </ul>   
               </li>
        </ul>

           </nav>

任何帮助将不胜感激。自从我不得不做任何 CSS 以来已经有好几年了，我的记忆有点糟糕！

在此处输入图像描述

4

1 回答 1

1

这应该做你想要的：

#style_me li a {
     color: #124162 !important;
}

（只是空格而不是>）而且，也许你不需要那个!important.

更新：如果您发布的内容被覆盖，请尝试更具体的 CSS 选择器。

#coolMenu li #style_me li a {
         color: #124162 !important;
}
于 2012-11-15T16:58:52.243 回答