0

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

Edited by bsewell: n/a

Attachments screenshot.png 2.25 KB
3
Contributors
2
Replies
3
Views
5 Years
Discussion Span
Last Post by drjohn
0

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.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.