为下拉菜单设置不同的无序列表元素样式

Question

我目前正在尝试从嵌套的无序列表创建一个下拉菜单。我有菜单工作，但我有一些关于造型的问题。触发下拉列表的整体链接是可点击的，需要具有白色文本的蓝色背景，但是下拉元素需要具有从整个导航容器继承的灰色背景。我需要做的就是修改文本颜色，但无论我采用哪种方法，我都会修改下拉文本颜色以及标题链接颜色。

我的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以来，已经有几年了，我的记忆力有点过分了！

Answer 1

这应该做你想要的：

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

（只是空格而不是>）而且，您可能不需要!important。

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

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