Need help with drop down menu

Hi guys,

I’m using div’s for the main navigation of my site and want to create a drop down for the first two buttons. All the tutorials I have seen have been for using unordered lists but I need to use divs for this navigation set as I they were better to control in this case.

Can anyone help me get them set up please? Ideally I would like the drop downs to fade in but it’s not essential. I take it I need to create an absolutely positioned div where I want my drop downs to appear, is that correct? - but then where do I go from there?

If you click here for the test site.

Thank you very much and I hope to hear from you.


I need to use divs for this navigation set as I they were better to control in this case.

No you don’t and there is little difference in "controlling " DIVs vs UL/LI’s. In fact, LI adds semantic structure and element levels for wich you’d otherwise have to add class to your DIVs to obtain. ALSO, since you are using jQuery (for the fade out’s) you can target te effects via he same selectors you use in your CSS, although I dunno how accessible jQuery fades are, but that can be dealt with later.

Essentially, your submenu is the UL within an LI ( LI UL)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ""><html>
		<style type="text/css">
		    .root, .root ul {padding:0; margin:0}/* you dont need this if you used a  your general reset*/
		    .root a {display:block; padding:10px;
		    	/* width 10em;*//* this is optional if you wnt to restrict the width of your submenu*/
			.root li {float: left; list-style: none; }
			.root li li{float:  none; position: relative }
			.root {background: pink; overflow: hidden; padding:0}
			.root li ul{background: orange; position: absolute;  top:100%; left:-9999em; overflow: visible   }
			 #nav {position: relative}
			.root li:hover ul{left:auto; color:red; }
			.root li:hover  {background: orange}
			.root li li:hover  {background: pink}

	<div id="nav">
<ul class="root" >
	<li><a href="index.php">Services</a>
		    <li><a href="#">Item</a>
		    <li><a href="#">Some longer item</a>
		    <li><a href="#">Item</a>
		    <li><a href="#">Item</a>
		    <li><a href="#">Item</a>
    <li><a href="profile.php">Cars</a>
		    <li><a href="#">Item</a>
		    <li><a href="#">Some longer item</a>
		    <li><a href="#">Item</a>
		    <li><a href="#">Item</a>
		    <li><a href="#">Item</a>
    <li><a href="news.php">Calendar</a></li>
    <li><a href="gallery.php">Gallery</a></li>
    <li><a href="video.php">Video</a></li>
    <li><a href="partners.php">Partners</a></li>


just incorporate this into your CSS and your markup.

Wow, thanks man!!! That’s mega, thank you.

One thing though - just testing it all and the drop downs don’t display when I line it all up - do you have any ideas? Here’s the test link.

Thank you again for your amazing help :slight_smile:

Hi, the problem is that #header has a fixed height on it, and the dropdown is being chopped off because of it.

I’d recommend gettng rid of that overflow:hidden and using either a cleared element at the b ottom of <header>…or using the clearfix :).

Thanks Ryan, top stuff! :slight_smile:

I removed the overflow:hidden and added a clear:both like you suggested.

The only thing now is that the drop down lists are not displaying the correct colours as they used to and they don’t stay down when I hover over them. Do you have any ideas?

Thank you again for your help guys :slight_smile:

Looks like all you need to do is change the position:relative on .root li li{} to position:static. Pretty sure that’s all you’d need to change :). At college right now so I’m unable to really do any tests.

Just sorted that with z-index on the nav div.

So now the things that I don’t understand is why the background image for the main buttons is not lining up (the li’s are set to 166px width, the same as the background image) and why the drop down boxes don’t appear in the set styles.

Does anyone know what I might be doing wrong now?


To keep the dropdown above the slideshow add this:


I don’t know what colours you wanted but you can target the submenu like this:

#nav li li a{background:#ccc}
#nav li li a:hover {background:#000;color:#fff}

Afraid I don’t know what you mean by your 2nd sentence…could you explain more?

Hi guys, thanks for the help and replies :slight_smile:

Sorry, the background images for the main buttons (which are kind of like breaks between each of the buttons) are 166px in width - the same 166px that the widths of the buttons are set to, but I don’t understand why they are not lining up with eachother. It looks like the background images are repeating themselves.

I probably haven’t explained that very well!

You can always set the background image to not repeat. I opened the image in a tab and I must say I didn’t even think the image was loading for some reason.

The reason it looks “doubled” up is because each anchor (via first-child) has an extra image set on it.

You can assign the first anchor in the list a class, and assign the special image that way :).

Awesome!!! Thank you so much for this (and for being patient with me :wink: !).

The only thing now is that the first button isn’t displaying it’s background image (although I’m probably wrong!!).

Thank you again for this, all of you guys!

Can you make the changes online? I’m not seeing any difference.

Quick! Class starts in 15 minutes :).

Haha - just have done bud! :slight_smile:

What do you mean?

I’ve gone to the page you’ve given us, and not a single change has been uplaoded on there (from what I see). Your page has had too many changes for me to do them all again in my local tester AND THEN go find out your current issue.

I have to go to class now. I have a computer class in 90 minutes so I’ll be back on here during then :).

No worries, thanks man! Have a good one :slight_smile:

Yeah, what I was talking about is that there should be a line to the left of the ‘Services’ button but it seems to have disappeared when I changed…

.root a:first-child


.root li li:first-child

…but I found it should be…

.root li:first-child

Just checked it all in Safari and Chrome and the drop downs don’t appear for some reason. The drop down lists are there because you can see the cursor changes to a hand, but they don’t don’t appear visible. Is there a fix do you know? - I tried visability:visible and overflow:visible on a couple of elements but it didn’t work - it actually made them not appear at all!

Thanks for bearing with me dude!

The dropdowns weren’t appearing forme in chrome due eto my suggestion of position:static not being added. Once I added that it worked.

I don’t know if you did anything to change my solution, but I tested in chrome originnally and that position:static worked.

You are THE man! Thank you so much for all your help. I’ll leave you in peace now! :slight_smile:

Thanks again for everything (and for not killing me!), top shooter :slight_smile:

You’re welcome :). Glad to help. You weren’t that bad of an OP. Sometimes we get characters in here ;).