homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Horizontal Dropdown Menu For a CSS Beginner

10+ Year Member

Msg#: 3920705 posted 3:17 am on May 27, 2009 (gmt 0)

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.



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

Msg#: 3920705 posted 4:01 am on May 27, 2009 (gmt 0)

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.


WebmasterWorld Senior Member 5+ Year Member

Msg#: 3920705 posted 8:32 am on May 28, 2009 (gmt 0)

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).


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

Msg#: 3920705 posted 12:27 pm on May 28, 2009 (gmt 0)

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.


WebmasterWorld Senior Member 5+ Year Member

Msg#: 3920705 posted 1:27 pm on May 28, 2009 (gmt 0)

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.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved