how do I set the bg color to a parent <LI> only

<style type="text/css">

* {
margin: 0;
padding: 0;
}

body {
padding: 50px;
}

ul#ddmenu, ul.sub1 {
list-style: none;
}

ul#ddmenu li {
border: solid 1px red;
width: 125px;
text-align: center;
position: relative;
float: left;
margin-right: 10px;
background: grey;
}

ul#ddmenu a {
text-decoration: none;
display: block;
width: 125px;
height: 25px;
line-height: 25px;
}

</style>

</head>

<body>

	<ul id="ddmenu">
		<li><a href="#">ABOUT US</a>
			<ul class="sub1">
				<li><a href="#">Company</a></li>
				<li><a href="#">Team</a></li>
				<li><a href="#">Careers</a></li>
			</ul>

		</li>
		<li><a href="#">OUR WORK</a>
			<ul class="sub1">
				<li><a href="#">Portfolio</a></li>
				<li><a href="#">Upcoming</a></li>
			</ul>
		</li>
		<li><a href="#">BLOG</a>
			<ul class="sub1">
				<li><a href="#">Blog</a></li>
			</ul>
		</li>
		<li><a href="#">PRODUCTS</a>
			<ul class="sub1">
				<li><a href="#">Websites</a></li>
				<li><a href="#">Add Ons</a></li>
			</ul>
		</li>
		<li><a href="#">CONTACT</a></li>
	</ul>		


</body>
</html>

The style ul#ddmenu li will style parent and sub levels unless you add a later style only for the sub-level:-

ul#ddmenu li {}/*all li levels*/
ul#ddmenu li li {} /*sub level which will be processed after the previous style and supersede it*/

thanks wickham thats a big help. finally do you no how i can align the sub li's horizontally, side by side?

ul#ddmenu li {}/*all li levels;*/
ul#ddmenu li li {float: left; width: ??px;} /*sub level which will be processed after the previous style and supersede it*/

Add the float to the parent li too, if you want those side by side.

 

You might have to add display: inline; in addition to float: left; but it isn't usually necessary.

thats brillaint wickham, thankyou so very much.