Tutorial - How to create and code drop down menu listing

Most dropdown menus will require a lot of scripting to be accomplished. But if we are to use structured XHTML and CSS, we can create a nice drop down menus which are so easy to edit and update later on if needed. It will work in all browsers including Internet Explorer. Javascript is not really required, we will need just a few lines of code in order to fix a bug in IE6 - You can copy and paste this code in all of the drop downs you will be designing in the future.

Now let’s start

Creating the menu

What we need to do is structure it logically. We will use unordered listings. Nothing complicated

<ul id="theMenu">
   <li><a href="#">Listing 1</a></li>
   <li><a href="#">Listing 2</a></li>
   <li><a href="#">Listing 3</a>
      <ul id="theSubMenu">
         <li><a href="#">Sub Listing 1</a></li>
         <li><a href="#">Sub Listing 2</a></li>
         <li><a href="#">Sub Listing 3</a></li>
      </ul>
   </li>
   <li><a href="#">Listing 4</a></li>
</ul>

That’s it. We are done with the xhtml.

Styling the drop down menu

Let’s proceed with the basic styling markup of the menu.
Open your CSS file and type in the following lines of code

#theMenu {
list-style:none;
width:100px;
margin:0;
padding:0;
}
#theMenu li {
position:relative;
}
#theMenu li ul {
display:none;
}
#theMenu li a {
background:#ddd;
color:#555;
border:1px solid #333;
padding:5px;
display:block;
text-decoration:none;
width:100px;
}

With this code, we are giving a some basic styling over our main UL and the anchor listings, as well as giving position:relative parameters to the listings (which is used to do the drop down) and display:none; to the ul which needs to serve us as a sub-menu / navigation.

The magic of the drop down menu lies within the following code.

#theMenu li:hover ul {
display:block;
}

The above mentioned code allows us the hidden menu to appear when the user mouse overs the appropriate listing of our main navigation.

We now should further style the sub-menu so it will look like we expect!

#theMenu li ul {
position: absolute;
left: 99px;
top: 0;
display: none;
list-style:none;
width:100px;
margin:0;
padding:0;
}

We are assigning position:absolute on the hidden menu, so when it appears it won’t push the other elements. The left and top parameters are used to place the nested listings adjanced to the main navigation.

By now, this drop down will work perfect in FireFox, Opera, Safari and Chrome, but not in Internet Explorer.

To fix it for IE, we need some simple bits of code for it, CSS and javascript.

The Javascript for the drop down menu

In the html file where the menu is located, write/copy down this piece of code

<script type="text/javascript">
<!-- Here goes the javascript -->
</script>

In the line where it says here goes the javascript, paste this code

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("theMenu");
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;

Now locate the following line in the CSS (#theMenu li:hover ul) and replace it so it will look like this:

#theMenu li:hover ul, #theMenu li.over ul {
display:block;
}

and fix the ie height bugs

* html ul li {
float: left;
height: 1%;
}

* html ul li a {
height: 1%;
}

This should perfectly work in all major browsers. You should style it per your needs.

You can check how it looks here
You can download the source file here here