1.11M Members

CSS Menu, sub menu not displaying

 
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

Attachments screenshot.png 2.25KB
 
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.

 
-1
 

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.

Question Answered as of 2 Years Ago by drjohn and simplypixie
You
This question has already been solved: Start a new discussion instead
Post:
Start New Discussion
View similar articles that have also been tagged: