CSS Drop down menu

HTML & CSS
1

Hey,

I am trying to create a CSS drop down menu, just one link need a drop down. Take a look at the following page:

http://www.loumolloy.com/lou/test.php

As you can see the navigation bar is all wrong.

I want the drop down as such:


		 	<li><a href="#">Mens range</a>
		 		<ul>
					<li><a href="#">Tees</a></li>
					<li><a href="#">Cardigans</a></li>
					<li><a href="#">Polos</a></li>
				</ul>
		 	</li>

How can i do this?

The tutorials i looked at were quite complex, so i would rather get a better response from here as i always do :slight_smile:

Hope someone can help…

Thanks again

2

Take a look at this thread. That should shed a light

3

www.htmldog.com made the suckerfish drop-down menu. They revised it and improved it in Son of Suckerfish. it uses 12 lines of javascript to do its work. it is very simple to use, with code like your sample.

4

And on that note, I would truly advise you not to use javascript on that all.

My previous experience with javascript didn’t go so well. I.E. does not work with javascript as well as firefox, and I have found it even better for XHTML validation to not use javascript.

Btw, have you searched “css drop-down menu”? on google and the forums? lots of ways to do it with a simple click.

5

Here is as simple as it gets.

Nested ul
Nested div/ul

6

Hey,

I have managed to create a nice drop down, you can see it here:

http://www.loumolloy.com/lou/

Hover over “Mens range” and you will see. However i have a problem, because i have a margin spacing out the “Mens range” link and the dropdown i can’t actually select a link from the dropdown menu…

Why is this? I need the space so is there a quick fix for this?

Thanks

7

Hi,
You are going to need to set a height on your main list item anchors. The height will be 36px since you had a 16px height with 10px paddings on the #navigation div. You will also want to reset that height and remove the top paddings.

You will need to set a line-height:36px; on the main list anchors in order to center the text vertically. Remove the top and bottom paddings there also.

The sub li a will need to be reset now so it does not get the same heights and line-height. Rather than supplying the majority of the styles to the sub ul on hover just go ahead and apply them to the initial sub ul styles. Then just reveal the sub ul on hover.

You can copy and paste the complete nav code into your css but I will highlight all the changes I just mentioned. (and some that I did not explain)


#navigation {
width: 869px;
color: #fff;
[COLOR=Blue]padding:0 10px;[/COLOR]
margin: 0px 0px 5px 0px;
background:url('images/nav.jpg');
font-family:"Trebuchet MS";
[COLOR=Blue]height:36px[/COLOR]
}

#navbar {
font-family:trebuchet MS;
font-size:14px;
}

[B]#navbar li[/B] {
list-style: none;
float: left; 
[COLOR=Blue]position:relative;/*set containing block for sub ul*/[/COLOR]
}

[B]#navbar li a [/B]{
display: block;
[COLOR=Blue]height:36px;
line-height:36px;[/COLOR]
[COLOR=Blue]padding: 0 28px;[/COLOR]
color: #fff;
text-decoration: none; 
}

[B]#navbar li ul[/B] {
[COLOR=Blue]position:absolute;
width:117px;
left:0;
top:100%;
margin-left:-999em;/*hide the sub ul*/
padding:4px;
font-size:12px;
background-color:#333436;
border-left:1px solid #5f6160;
border-right:1px solid #5f6160;
border-bottom:1px solid #5f6160;
z-index:10000;[/COLOR]
}

[B]#navbar ul li [/B]{
[COLOR=Blue]float: none;
display:block; [/COLOR]
}

[COLOR=Black][B]#navbar ul li a[/B] [/COLOR]{
[COLOR=Blue]line-height:normal;
height:auto;[/COLOR]
color: #03a8de; 
}

[B]#navbar li:hover ul, #navbar li.hover ul [/B]{
[COLOR=Blue]margin:0;/*show the sub ul*/[/COLOR]
}
8

Thank you, that has worked for me, i lost the hover states so i had to re-enter these but all in all it works perfectly :wink:

Thanks again