Script for Slide Menu

[Merri]

You need only CSS to do the basics, plus an additional file to get IE right (whatever:hover code). Doing a menu without knowing enough CSS is pretty hard, but I'll explain it anyway. So first make a menu with CSS and testing it with Firefox and Opera. Basic code to get it working:

<ul id="menu">
    <li><a href="/">Test link #1</a>
        <ul>
            <li><a href="/">Submenu link #1</a></li>
            <li><a href="/">Submenu link #2</a></li>
        </ul>
    </li>
    <li><a href="/">Test link #2</a>
        <ul>
            <li><a href="/">Submenu link #3</a></li>
            <li><a href="/">Submenu link #4</a></li>
            <li><a href="/">Submenu link #5</a></li>
        </ul>
    </li>
</ul>

This is a unordered list which has two unordered lists within it. You can take a look into it with a browser to see what it looks like without styling.

Now we start applying CSS to get whatever result we want. First it is good to reset some settings to get nearly identical results on all browsers.

* { border : 0; margin : 0; padding : 0; }

This will set borders, margin and padding of all elements to zero. The ending result is that everything is very much close together. This however makes custom styling much easier when comparing the results between multiple browsers, because we don't need to individually reset settings for many elements. Browsers don't have an entirely identical line on what is used to gain the default look of an element, sometimes margins are used in one browser, sometimes padding in another. If we don't reset settings in some browser we might get very different result from other browsers.

Anyways, the visual result looks like this:

* Test link #1
* Submenu link #1
* Submenu link #2
* Test link #2
* Submenu link #3
* Submenu link #4
* Submenu link #5

Next we want to remove the bullets. This is very easy:

#menu,#menu ul { list-style : none; }

This will remove the bullets from the main level #menu and from the child items. Since we are making a horizontal menu, we want to set the main level items horizontally next to each other. Thus:

#menu { display : block; height : 25px; overflow : hidden; }
#menu li { display : inline; float : left; }

Now top level items are right next to each other so that the child items go on top of each other. Next lets make it so that the submenus become submenus, so that we need to hover on the main level items to see the submenus:

#menu ul { top : -2000px; }
#menu li:hover ul { top : auto; }

Now this automatically hides the menus from the screen -2000px above the top. We need to do this way so that the screen readers can read the menu contents for blind people. The hover sets the menus to position where they'd normally go to.

Our next challenge is to fix the submenus so that they look better and tile them on top of each other. CSS inherits settings, so we have to undo some of the settings that effect also the submenus. Float is one of these settings that we want to undo, because we don't want the submenu items to tile horizontally.

#menu li li { float : none; }
#menu a { display : block; height : 19px; padding : 3px 10px; }
#menu li:hover a { background : black; color : white; }

Now we set all links to be block elements. This makes them nice boxes. We also set so that when we hover on top of a main level element the link background becomes black and link text color white. Unfortunatenaly the settings are again inherited to all child links as well, so we need to undo the effects. Luckily this is easy enough:

#menu li:hover ul a { background : white; color : black; }

This sets the items within the submenu to have white background and black text color. But we don't have a hover effect! We just have to do it again for the submenu items:

#menu ul li:hover a { background : black; color : white; }

Now we should have a quite simple horizontal CSS menu. For more possible styling options, take a look at W3C's CSS property index.

As a note, I didn't really test any of the code I wrote, I hope I got it all right and that you learned most of what you need to know when dealing with a pure CSS dropdown menu Remember that IE will be a devil, you need to use conditional comments to add IE specific style to force it look like the other browsers. You also need the whatever:hover code to add :hover support to list items. As additional tip you might want to use display : inline-block; and position : relative; to fix some of IE's issues with a horizontal dropdown menu.