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:
#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;
}
Thanks
Thomas