CSS Menu, sub menu not displaying

[bsewell]

Hi,
I am making a horizontal menu system for a website. So, I have looked at examples of css menu's before I attempted my own.

So, right now the menu is working top level-wise up until it spots my UL tag inside of my LI. My problem is that the colors is working, but it is not lining up to the top level. So in the screenshot I attached, Jobs should be under Candidates. Instead, it's gone to the next line.

How do I fix the position problem for my nested ul?

<ul class="nav">
<li><a href="">Home</a></li>
<li><a href="">Active Candidates</a></li>
<li><a href="">Candidates</a>
<ul><li><a href="">Jobs<a href=""></li></ul>
</li>
<li><a href="">Contact Us</a></li>
</ul>

ul.nav, ul.nav ul
{
	display:block;
	list-style: none;
	margin: 0;
	padding: 0;
	background-color:#000000;
	height:12px;	
}

ul.nav li a, ul.nav ul li a
{
	text-decoration:none;
	color:#00ff33;	
}

ul.nav li
{
	display:inline;
}

ul.nav li a:hover, ul.nav ul li a:hover
{
	background-color:#d20001;
	color:#000000;	
}

Cheers

[simplypixie]

You need to give your sub-ul a class and then right the formatting for that class in your style sheet to position it correctly.

[drjohn]

This simple tutorial might help you.

http://divitodesign.com/css/how-to-dropdown-css-menu/

or this one

http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/

google will give you millions of examples to study and work from

You don't need to add a class to the sub-ul.

At its simplest, you can just copy the entire code from either tutorial, then re-style to suit your site. THEN try to understand the code.