I'm currently working on creating a drop-down menu using nested unordered lists. The functionality of the menu is all set, but I'm running into some styling issues. The main link that triggers the drop-down should have a blue background with white text, while the drop-down elements should inherit a grey background from the overall navigation container. I've been attempting to change the color of the text without affecting the heading link color, but so far, every method I try ends up modifying both.
Below you'll find my CSS code, along with an example of the current display and the HTML used to build the menu:
/*CSS*/
#coolMenu,
#coolMenu ul {
list-style: none;
}
#coolMenu {
float: right;
}
#coolMenu > li {
float: left;
}
#coolMenu li a {
display: block;
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">
<li><a href="#" class="donate">Login / Register</a>
<ul id="style_me">
/* These should be grey background with 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>
If anyone can offer assistance, it would be greatly appreciated. It's been a while since I worked with CSS, and my memory is a bit rusty!