CSS BG Color

[TomTom100]

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?

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

#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

[pwinfrey]

All of your menus are using the same id. Ids by definition are unique.

[TomTom100]

Ok, so is there a way for me to fix it?


Thanks
Thomas

[pwinfrey]

Use a class. class="navmenu" instead of id="navmenu"

Your CSS will be .navmenu instead of #navmenu.

[TomTom100]

Sorry, I don't really understand! I'm not really very good at CSS.

Please could you explain in more detail?


Thanks
Thomas

[pwinfrey]

<div class="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 class="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 class="navMenu">
		<ul>
			<li><a href="../videos.html">Videos</a>
				<ul>
					<li></li>
					<li></li>
				</ul>
			</li>
		</ul>
	</div>


	<div class="navMenu">
		<ul>
			<li><a href="../contact.html">Contact</a>
				<ul>
					<li></li>
					<li></li>
				</ul>
			</li>
		</ul>
	</div>

.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;
}

[TomTom100]

Thanks for your help!


But I don't think I worded the question well at the start. I meant how can I change the background color of just the drop down items and not the top ones? Presumably I should still keep it as a class though (.navMenu)


Sorry for my error

Thanks
Thomas

[djadejones]

not 100% on this because i only have basic knowledge of css too but i think what i would do is give the top link (list item) a class of outer for example and then the inner links (list items) a class of outer and then in your css rather than having your background-color on .navmenu li you can have it on .outer or .inner and it should just change one or the other.

Hope this helps (or it could just all be waffle).

[TomTom100]

Yes, thank you! That did the job perfectly!


Thanks
Thomas