Solved it!!!

Great tut. Thank you.

Just one question (probably a very obvious answer) I can’t seem to get the background to work for the top level (Home).

Where am i going wrong

*{ margin:0px; padding: 0px; }

#nav {
font-family: arial, sans-serif;
position: relative;
width: 500px;
font-size:16px;
height:56px;
color:#3c2313;
}

#nav ul {
list-style-type: none;
font-size:16px;
}

#nav ul li {
float: left;
position: relative;
}

#nav ul li a {
text-align: left;
text-decoration:none;
color:#3c2313;
}

#nav ul li ul {
display: none

}

#nav ul li:hover ul {
display: block;
position: absolute;
background:#3c2313;
}

#nav ul li:hover ul li a {
display:block;
background:#3c2313;
color:#ffffff;
width: 130px;
text-align: left;
font-size:12px;
/*border-bottom: 1px solid #3c2313;
border-right: none;*/
}

#nav ul li:hover ul li a:hover {
background:#ffffff;
color:#3c2313;
}

Cheers,
DsyD

Have a great day,

Sincerely yours,
Tonya in VA, near DC

Great tutorial! I followed along and was testing everything in firefox. When I loaded the same page in ie 7 & then ie 8 today, the drop down didn’t work. Any idea what I might be missing? I saw someone else ask the same question and then they said they were just missing the transitional DTD. If I remember correctly DTD stands for document type definition, but I don’t know what that means =) Any help would be greatly appreciated.

In order for the CSS styles to work in this example you need to either use an embedded stylesheet or you can use an external one.

Here is an example of how to link the CSS styles to your HTML page.
http://www.w3schools.com/css/css_howto.asp

In my current example the menu is static because I hard coded the HTML meaning I wrote in what I wanted my menu items to be. It would be dynamic if it were used in something like wordpress and it added new menu items each time you added a page.

I hope this helps you out a little!

Can someone please help me with the code that Shane posted?
I am a website designer, but I am more proficient in using
HTML Code and CSS with Dreamweaver because it builds the code
for me.

I pasted the HTML Code and the CSS Code that Shane posted
on this site into 1 file on NOTE PAD and I saved the file
as .HTML

Then, I opened the file up in my IE browser and the menu did not work. I only see the bullet point list and the css code is visible.

The css styles were never applied to my html code.
Should I create a separate CSS code file and HTML file?
Do you think that this is my problem?

Also, is Shane’s CSS coded menu a “static menu”?
I read that search engines can read “static menus”
much better than java scripted menus and that is why
I need a “staic menu” for my website and luckily I
found Shane’s awesome tutorial. =)

I appreciate everyone’s help.

Thanks,
Tonya

I’m deperately trying to find a simple, lightweight, css only (or minimum jQuery) horizontal drop down menu, and it’s not easy!
Tjobbe´s last blog ..I wrote a guide about @font-face