Horizontal Dropdown Menu For a CSS Beginner

Forum Moderators: not2easy

Message Too Old, No Replies

Horizontal Dropdown Menu For a CSS Beginner

lloyd

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.

tangor

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.

enigma1

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">
<head>
<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;
}
</style>
</head>
<body>
<div id="menu">
 <ul>
  <li><a href="#Bar1">Bar1</a>
   <ul>
    <li><a href="#Sub1">Sub1</a></li>
    <li><a href="#Sub2">Sub2</a></li>
   </ul>
  </li>
  <li><a href="#Bar2">Bar2</a>
   <ul>
    <li><a href="#Sub3">Sub3</a></li>    <li><a href="#Sub4">Sub4</a></li>
   </ul>
  </li>
  <li><a href="#Bar4">Bar3</a></li>
 </ul>
</div>
</body>
</html>

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

swa66

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.

enigma1

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.