Introduction

I was intrigued by the concept of a horizontal menu system with onmouseover submenus using CSS and (a little) JavaScript. Inspired by projectseven.com's "Uberlink CSS Rollover", I began to formulate a cross browser method of a horizontal drop down menu system.

So, how do you make a horizontal drop-down menu system that displays relevant sub menu's to the nth degree? Lets start out with a simple three by three menu, meaning we have three 'main' menu options, each with three subordinate menus. Remember, the goal here is to display all second level menus on demand, and to not display the menus that aren't appropriate.

What you need to know in order to do this: basic HTML, basic CSS, and some JavaScript. And some free time.

Start with the basics!

First off, lets get make a list of what we want in our menus. In fact, lets make an unordered list!

<ul>
 <li>Menu1</li>
 <li>Menu2</li>
 <li>Menu3</li>
</ul>

So, that takes care of our main menu items. It looks like this in most any browser:

But wait! That's not what we want! Well, with a little CSS magic, we can transform that into a horizontal list! We need to place it inside it's own CSS element, to ensure that we don't make any unintended changes to other lists that we want to preserve. Here's our first element in CSS.

#mainmenu {
     position: absolute;
     left: 36px;
     top: 86px;
}

And we'll insert our list within a <div> element call.

<div id="mainmenu">

</div>

And, since we're going to use the mouseover JavaScript function, along with the :link, :visited and :hover pseudo elements of CSS, we'll need to make each list item a link. For now, we can use a 'dummy' link, by placing a <a href="#"> </a> around the name of each list item element.

<ul>
 <li><a href="#">Menu1</a></li>
 <li><a href="#">Menu2</a></li>
 <li><a href="#">Menu3</a></li>
</ul>

Now, lets get rid of those bullets, and the <li> indent. Since we're taking control of the li items, we need to make changes to the ul statements.

#mainmenu ul {
     /*/*/margin: 0;
     white-space: nowrap;
     padding: 0; /* */
}

Now, we need to make the list horizontal.

#mainmenu li {
     display: inline;
     list-style-type: none;
}

The white-space: nowrap; call tells the browser not to insert a line break if the menu ever becomes too big (i.e., browser window resizing). A horizontal scrollbar will be placed if required. display: inline; forces the list to be, well, displayed inline. list-style: none; removes those annoying bullets. The margin and padding calls remove the indentation from IE, NN, Opera and Mozilla. Now, let's take care of the a elements.

#mainmenu a {
     color: #000;
     /*/*/padding: 1px 8px 1px 24px;
     border: 1px solid #333333;
     background-image: url(images/standard.gif); /* */
}

#mainmenu a:link, #staticmenu a:visited {
     color: #000;
     text-decoration: none; /* */
}

#mainmenu a:hover {
     color: #FFF;
     border: 1px solid #333333;
     background-image: url(images/mouseover.gif);
}

We're using the following two images for this. You can use virtually any images you want, as long as they provide good contrast to the page itself and to each other (we want to let the user know they're doing something right when they hover over an image).

The basic gif

The mouseover gif

So, we have this!


And that's where project seven leaves off... Now, lets make this menu awesome!


< Return to jamesw.org  ::  On to Page 2 >