You can view my CSS drop-down menu here:

http://www.digitalstrife.com/test/dropdown.htm

The first menu is the actual menu. The one below it is a graphic demonstrating how I'd like the menu to look. Basically what I need to do is make the sub-menu items look slightly different that the main menu items (as demonstrated in the graphic in the above URL). Because the menu is simply an unordered list fancied up by CSS, I'm having trouble differentiating the main menu li's from the submenu li's.

Here's the code I'm using to acheive the drop-down menu, which I got from A List Apart (customized slightly to fit my design):

Code:
<html>
<head>
<title>CSS Drop Down Menu</title>
<style>
body {
font: normal 13px trebuchet ms,verdana,tahoma,arial,sans-serif;
}
 
ul {
margin: 0;
padding: 0;
list-style: none;
width: 134px;
border-bottom: 1px solid #fff;
}
li:hover ul, li.over ul { 
display: block; }
ul li {
position: relative;
}
li ul {
position: absolute;
left: 133px;
top: 0;
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #fff;
background-image: url(images/link_bg.gif);
padding-left:25px;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 5px;
border: 1px solid #fff;
border-bottom: 0;
}
 
ul li a:hover { color: #fff; background-image: url(images/link_bg2.gif) } /* Hover Styles */
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
 
</style>
<script>
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace (" over", "");
}
}
}
}
}
window.onload=startList;
 
</script>
</head>
<body>
<ul id="nav">
	<li><a href="#">Services</a></li> 
	<li><a href="#">Ask a Question</a> 
	</li> 
	<li><a href="#">Contact Us</a> 
	</li>
	<li><a href="#">Logon</a> 
	 <ul> 
		<li><a href="#">Engineers</a></li> 
		<li><a href="#">Administrators</a></li> 
		<li><a href="#">Forgotten Password</a></li> 
	 </ul> 
	</li> 
</ul>
 
</body>
</html>
Would anyone like to take a stab at it? Seems like it should be pretty easy...