Question

I’m currently trying to create a drop-down menu from nested unordered lists. I have the menu working however I’m having some issues with regards to styling. The overall link that triggers the drop-down is clickable and needs to have a blue background with white text however, the drop-down elements need to have a grey background which is inherited from the overall navigation container. All I need to do is modify the text colour however whatever I method I try it always modifies the drop-down text colour as well as the heading link colour.

My CSS can be found below along with an example of the current display and the html used to generate the menu:

/*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>

Any help would be greatly appreciated. It’s been a couple of years since I’ve had to do any CSS and my memory is a bit flakey!

Answer 1

This should do what you want:

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

(just spaces instead of >) And, perhaps, you won’t need that !important.

Update: try even more specific CSS selector if what you posted is being overridden.

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