CSS BG Color

Hi,

I have a CSS navigation menu but when I change the background color on #navMenu li it changes the background colour on the top menu as well as the drop down menus, but I only want to change the BG color on the drop downs. How can I do this?

[CODE] <div id=”navMenu”>
<ul>
<li><a href=”../index.html”>Home</a>
<ul>
<li></li>
<li></li>
</ul>
</li>
</ul>
</div>

<div id=”navMenu”>
<ul>
<li><a href=”http://about.me/thomashochkins”>About</a>
<ul>
<li></li>
<li></li>
</ul>
</li>
</ul>
</div>

<div id=”navMenu”>
<ul>
<li><a href=”../gallery.html”>Gallery</a>
<ul>
<li><a href=”../download.html”>Download</a></li>
<li><a href=”../photos.html”>Photos</a></li>
</ul>
</li>
</ul>
</div>

<div id=”navMenu”>
<ul>
<li><a href=”../videos.html”>Videos</a>
<ul>
<li></li>
<li></li>
</ul>
</li>
</ul>
</div>

<div id=”navMenu”>
<ul>
<li><a href=”../contact.html”>Contact</a>
<ul>
<li></li>
<li></li>
</ul>
</li>
</ul>
</div>[/CODE]

[CODE]#navMenu {
margin:0;
padding:0;
}

#navMenu ul {
margin:0;
padding:0;
line-height:30px;
}

#navMenu li {
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background-color:#f0eccd;
}

#navMenu ul li a {
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
text-decoration:none;
width:85px;
height:30px;
display:block;
color:#ff9a29;
}

#navMenu ul ul {
position:absolute;
visibility:hidden;
top:30px;
}

#navMenu ul li:hover ul {
visibility:visible;
}

#navMenu li:hover {
background-color:#ff9a29;
}

#navMenu ul li:hover ul li a:hover {
background:#ff9a29;
color:#FFF;
}

#navMenu a:hover {
color:#FFF;
}

#navMenu ul li:hover a {
color:#fff;
}[/CODE]

Thanks
Thomas

Also in #CSS _↴