Start New Discussion within our UI / UX Design Community

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

Attachments screenshot.png 2.25 KB

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.

This question has already been answered. Start a new discussion instead.