Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Horizontal Dropdown Menu For a CSS Beginner

3:17 am on May 27, 2009 (gmt 0)

10+ Year Member

My background is in online marketing, but I am now trying to design my own website, but I have now hit a brick wall.

I am writing a smallish website so as I am learning I am writing it all in notepad. What I am trying to write is a horizontal menu with drop down sub categories.

I have looked at many tutorials, but for some reason nothing seems to be working, ie I can not get the sub categories to display/dropping down. The site is not live and all testing is done on my c: drive.

Does anyone have any examples that will work in my testing. I'm not interested in templates and Javascript. I am trying to learn it all in CSS.

Help greatly welcomed.

Many thanks.

4:01 am on May 27, 2009 (gmt 0)

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

For some things it is not a bad idea to look at working examples and take them apart to learn how it was done. Suckerfish is not a bad place to start.
8:32 am on May 28, 2009 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member

Here is an example of a simple hz css menu, that should work if you save it to a file and then load it with a browser.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
<title>test form</title>
<style type="text/css">

#menu {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
font-weight: bold;
#menu ul {
padding: 0px;
margin: 0px;
width: 800px;
list-style-type: none;

#menu ul li {
position: relative;
width: 200px;

#menu li {
float: left;
width: 100%;
background: #990;
border-top: #555 1px solid;

#menu li ul li {
float: none;

#menu a {
color: #EFEFEF;
width: 200px;
text-indent: 4px;
line-height: 25px;
display: block;
text-decoration: none;

#menu a:hover {
color: #FFFFFF;
background-color: #FF0000;

#menu ul li ul {
visibility: hidden;
position: absolute;
left: 0;
top: 100%;

#menu ul li:hover ul {
visibility: visible;
<div id="menu">
<li><a href="#Bar1">Bar1</a>

<li><a href="#Sub1">Sub1</a></li>
<li><a href="#Sub2">Sub2</a></li>
<li><a href="#Bar2">Bar2</a>
<li><a href="#Sub3">Sub3</a></li>

<li><a href="#Sub4">Sub4</a></li>
<li><a href="#Bar4">Bar3</a></li>

Lots of the online examples only list the basic HTML and CSS and in many cases it's dependent on the main HTML/stylesheet of the tutorial page which is hard for beginners. So you need the main headers (a separate document is much better).

12:27 pm on May 28, 2009 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

Just know that you can't make this work in IE6 unless you add some scripting as IE6 doesn't support :hover over anything but an <a> element.

My weapon of choice in this is IE7.js (fixes a truckload of other problesm with IE6 as well)

In th epast I've had a few issues with "visibility: hidden" not being willing to turn back visible n some browsers (I think Opera -some version- is doing this). It's probably easier to use display:none instead.

1:27 pm on May 28, 2009 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member

Actually you don't need js at all to make it show on IE6. It can show the same way, but you do need a bunch of additional css and the use of the if IE versions checks in the html. And it's also w3c compliant.