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.

Featured Threads

Hot Threads This Week

Hot Threads This Month