T and S Web Design

Drop down menus are one of the most useful tools in a website. They can make a big site very easy to navigate through. However, for the web developer they can seem like such a daunting task. This short tutorial can help anyone get started with a simple drop down. The drop down will work in all current browsers (Opera, Safari, Firefox, Chrome, and Internet Explorer 6+) if done correctly. IE will need a little bit of help using javascript.

The first thing to do when creating a CSS drop down is to write the corresponding HTML or XHTML. I have seen many people use DIV tags to code drop down menus. However, I would argue that the best menu, including drop down menus, is always a list. Here is how we should start our list:

<ul id="mainmenu">
  <li><a href="#">First Link</a></li>
  <li><a href="#">Second Link</a>
    <ul>
      <li><a href="#">Drop Down One</a>
      <li><a href="#">Drop Down Two</a>
    </ul></li>
  <li><a href="#">Third Link</a></li>
</ul>

Next, we need to add a little bit of javascript to the head tag to make sure that IE7 and below will work correctly. Note that since we are adding javascript for the drop down and the CSS for the drop down may not work in all older browsers, it is highly recommended that you still include all the subitem links on the item page. (ie. Include links to “Drop Down One” and “Drop Down Two” on the “Second Link” page.) The javascript tells IE and below to add “hover” to class attribute when mouse hovers over a list item, since it doesn’t support the :hover modifier for list items inherently.

<!--[if lte IE 7]>
<script language="javascript" type="text/javascript">
function makeDropDownMenu(ul) {
  var lis = ul.getElementsByTagName('li');

  for (var i = lis.length - 1; i >= 0; i--) {
    lis[i].onmouseover = function() { this.className += ' hover'; };
    lis[i].onmouseout = function() { this.className = this.className.replace(new RegExp('\\bhover\\b'), ''); };
  }
}

function loadIEHover() { makeDropDownMenu(document.getElementById('mainmenu')); }
window.attachEvent("onload", loadIEHover);
</script>
<![endif]-->

And now for the fun part! Styling the drop down with CSS can be a tricky process at first. Here are a few basic suggestions for troubleshooting your CSS if it does not work:

• Know the cascading rules for cascading style sheets and make sure that one of your previous rules for the drop down is not overriding the rule that is not working.
• Make sure that everything is positioned absolutely and that overflow is set to visible.
• Make sure that you have overridden any default browser styles and/or styles used by the rest of the site (especially margin and padding).

If your drop down is not working the way you think then one of the above suggestions will probably be the answer. At least those were the issues that I regularly ran into the first few times I designed drop down menus. Below is some sample CSS that can at least help get you started. Note that many times IE6 and sometimes IE7 will need different styles than more standards compliant browsers.

<style type="text/css">
body { background: #A9DEEF; }
#mainmenu { margin: 0px; padding: 0px; overflow: visible; position: relative; }
#mainmenu li { background-image: none; display: inline-block; min-height: 15px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; }
#mainmenu li a { color: #444; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; text-decoration: none; text-transform: uppercase; }
#mainmenu li a:hover { color: #000; }

#mainmenu ul { background: #000; left: -9999px; margin: 0px 0px 0px -63px; opacity: 0.8; padding: 0px; position: absolute; top: 15px; width: 127px; z-index: 1; }
#mainmenu ul li { border-top: 1px solid #FFF; display: block; margin: 0px; padding: 0px; }
#mainmenu ul li.First, #mainmenu ul li:first-child { border-top: none; }
#mainmenu ul li a { color: #CCC; display: block; font-size: 10px; font-weight: normal; padding: 5px 15px; text-decoration: none; text-transform: none; }
#mainmenu ul li a:hover { color: #FFF; text-decoration: underline; }
#mainmenu li:hover ul, #mainmenu li.hover ul { left: 50%; }
</style>
<!--[if lte IE 7]>
<style type="text/css">
#mainmenu li { display: inline; }
#mainmenu ul { filter: alpha(opacity=80); }
#mainmenu ul li a { display: block; }
</style>
<![endif]-->

Putting it all together, we have:

<html>
<head>
<title>Drop Downs are Awesome!</title>
<style type="text/css">
body { background: #A9DEEF; }
#mainmenu { margin: 0px; padding: 0px; overflow: visible; position: relative; }
#mainmenu li { background-image: none; display: inline-block; min-height: 15px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; }
#mainmenu li a { color: #444; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; text-decoration: none; text-transform: uppercase; }
#mainmenu li a:hover { color: #000; }

#mainmenu ul { background: #000; left: -9999px; margin: 0px 0px 0px -63px; opacity: 0.8; padding: 0px; position: absolute; top: 15px; width: 127px; z-index: 1; }
#mainmenu ul li { border-top: 1px solid #FFF; display: block; margin: 0px; padding: 0px; }
#mainmenu ul li.First, #mainmenu ul li:first-child { border-top: none; }
#mainmenu ul li a { color: #CCC; display: block; font-size: 10px; font-weight: normal; padding: 5px 15px; text-decoration: none; text-transform: none; }
#mainmenu ul li a:hover { color: #FFF; text-decoration: underline; }
#mainmenu li:hover ul, #mainmenu li.hover ul { left: 50%; }
</style>
<!--[if lte IE 7]>
<script language="javascript" type="text/javascript">
function makeDropDownMenu(ul) {
  var lis = ul.getElementsByTagName('li');

  for (var i = lis.length - 1; i >= 0; i--) {
    lis[i].onmouseover = function() { this.className += ' hover'; };
    lis[i].onmouseout = function() { this.className = this.className.replace(new RegExp('\\bhover\\b'), ''); };
  }
}

function loadIEHover() { makeDropDownMenu(document.getElementById('mainmenu')); }
window.attachEvent("onload", loadIEHover);
</script>
<style type="text/css">
#mainmenu li { display: inline; }
#mainmenu ul { filter: alpha(opacity=80); }
#mainmenu ul li a { display: block; }
</style>
<![endif]-->
</head>
<body>
<ul id="mainmenu">
  <li><a href="#">First Link</a></li>
  <li><a href="#">Second Link</a>
    <ul>
      <li><a href="#">Drop Down One</a>
      <li><a href="#">Drop Down Two</a>
    </ul></li>
  <li><a href="#">Third Link</a></li>
</ul>
<p>This is a test paragraph below the menu.</p>
<p> </p>
</body>
</html>

Each drop down is different, but the underlying principles and most of the base code is the same. As you deesign more and more drop downs you will come across more and more oddities in browsers that do not work the way you think. Thankfully, with more experience also comes the ability to troubleshoot the problems a lot quicker.