CSS Menus – Horizontal Drop Down CSS Menu

Sometimes a normal horizontal menu is not enough to satisfy the customer. Recently I designed a web site which contained anchor links to several different sections on the page. I placed links to all the sections at the top of the page. After almost completing the site, he asked if that page could be changed to have a horizontal drop down menu. Instead of creating a DHTML menu I decided to build it with CSS and a little javascript (to make it correctly in IE 6).


The beauty of this type of menu over other menus is that it has clean code, is fast loading, accessible, and search engine friendly.

Here’s the web site showing the CSS horizontal drop down menu

http://www.wrightway-fitness.com

CSS


#menu{
height:3px;
color:#fff;
padding:5px 0 40px 20px;
background-color: #2D62A8;
}
*html #menu {
height:10px;
color:#fff;
padding:10px 0 0 12px;
background-color: #2D62A8;
}
*Main Menu Link Styles*/
#navbar {
  width:760px;
  }
#navbar ul {
    margin: 0px 0 0 0;
    padding: 10px 0 0 85px;
    list-style: none;}
#navbar ul li {
    position: relative;
float: left;
margin: 0;}
#navbar a {
display: block;}
/* Main Menu Drop Down Styles*/  
#navbar ul li ul {
    width: 185px;
    position: absolute;
    display: none;
    left: -3px;
    font-size: 0.85em;
color:#fff;
    padding: 1px;}
#navbar ul li ul.lastbutton {
    top: 42px;
    padding: 1px; }
#navbar li:hover ul, #navbar li.over ul {
    display: block; }
#navbar ul li ul li {
    width: 199px;}
#navbar li:hover ul li a:link, #navbar li.over ul li a:link, #navbar li:hover ul li a:visited, #navbar li.over ul li a:visited {
    width: 179px;
    color: #777;
margin:0;
padding:4px;
background-color:#CADCE7;
text-indent:5px;
}
* html #navbar li:hover ul li a:link, * html #navbar li.over ul li a:link, * html #navbar li:hover ul li a:visited, * html #navbar li.over ul li a:visited {
    width: 199px; }
#navbar li:hover ul li a:hover, #navbar li.over ul li a:hover {
text-indent:5px;
color:#000;
margin:0;
padding:4px;}
/* main menu styles*/
#menu li {
    margin:0 1px 0 0;
    padding:0 2px;}
#menu a {
color:#FFF;
font-size:0.9em;
text-decoration:none;
padding:0 4px;}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#menu a {
float:none;}
/* End IE5-Mac hack */
#menu a:hover {
color:#FFF;
font-size:0.9em;
text-decoration:underline;}

XHTML


<!--MENU -->
<div id="menu" >
<a name="navigation" id="navigation"></a>
<div id="navbar">

<ul id="nav">
  <li><a href="http://www.wrightway-fitness.com/">HOME</a></li>
  <li>|</li>
  <li><a href="http://www.wrightway-fitness.com/about.shtml">ABOUT US</a>
  </li>
  <li>|</li>  
  <li><a href="http://www.wrightway-fitness.com/services.shtml">FITNESS SERVICES</a>
<ul>
  <li><a href="http://www.wrightway-fitness.com/services.shtml#P">Personal Training</a></li>
  <li><a href="http://www.wrightway-fitness.com/services.shtml#Gr">Group Sessions</a></li>
  <li><a href="http://www.wrightway-fitness.com/services.shtml#Fit">Fitness Seminars</a></li>
  <li><a href="http://www.wrightway-fitness.com/services.shtml#Fee">Fee Schedule</a></li>
</ul>
  </li>
  <li>|</li>
  <li><a href="http://www.wrightway-fitness.com/contact.shtml">CONTACT US</a></li>
  <li>|</li>
  <li><a href="http://www.wrightway-fitness.com/links.shtml">FITNESS LINKS</a></li>
  <li>|</li>  
</ul>
</div></div>
<!--MENU -->

JAVASCRIPT

Javascript has to be added to make the site also render well in IE6.
I placed the code displayed below in an external file (folder named js) between the header tags.


<script type="text/javascript" src="js/dropdown.js"></script>


startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace (" over", "");
   }
   }
  }
}
}
window.onload=startList;

Tip

I had to adjust the padding and margins for the menu and navbar styles to precisely position the css drop down so it rendered correctly in Internet Explorer and Firefox browsers.

Resources

Another example using the same menu
verydeepblue.co.nz/cpsic/index.php

Drop-Down Menus, Horizontal Style
http://www.alistapart.com/articles/horizdropdowns

*****************************************
Herman Drost is the Certified Internet Webmaster (CIW)
owner and author of Web Design, SEO, Hosting

Receive fresh, in-depth articles articles on how to design, optimize and promote your web site by subscribing to his “Marketing Tips” newsletter at: http://www.isitebuild.com/

Speak Your Mind

*