Web Design & Architecture -- LIS 9723 logo

More help

A List Apart has an excellent article (with examples) for understanding how positioning works.


CSS Drop Down Samples:

Sample 1

Sample 2

Other tutorials:

There are dozens of good tutorials on how to create a menu like this. I thought these looked promising.


A really simple and easy-to-handle CSS approach.

This one also has minimalistic code needs.

More complex:

I thought the use of CSS3 was elegant in this one.

This one uses CSS3 transitions too, and looks cool.




CSS Drop Down Menus

The idea here is to show your local navigation along with your persistent navigation, but to do so in a way that is accessible and so that it will work without javascript.

How it works


You create an unordered list <ul></ul>, with nested unordered lists within each list item, when you have local navigation you'd like to show.












There are several things at play within the CSS. We are not going to try and code this by hand though, but I do want you to get a sense of what is happening.

Changing the list:

First, you don't display the bullets in the unorderded lists.

Then you need to align the list so that it is side-by-side. You do this you will float the list items <li></li> to the left.

Making the submenu appear:

You also will need special rules in the CSS, which are called selectors. The two we use in the drop downs are child selectors (>) and the :hover effect. (This can be used on link tags or the list items themselves <a:hover> or <li:hover>.)

The child selector is essentially a rule that says it only applies to a child of an element.

Then we use positioning

Finally, in the drop down parts of the menu, we'll need to use special positioning properties. Normally, we have been using the default values, which are static -- the elements stack on top of one another.

Relative positioning allows you to offset elements from one another or from the document itself.

Absolute positioning takes an element out of the normal flow, which means, essentially, that it will not be influenced by the position of other elements (relative or static).

Fixed is based on the document window, and will not scroll. (Just like that background image property.) Don't use this except in limited circumstances.

Back to our menu

So, in the case of our drop down, the appearance of the sub-menu is controlled by relative position (relative to the list item) and the actual drop down is controlled by the absolute position (otherwise it wouldn't overlap the content underneath it.)


Back to Top
Last updated:

Course Outline | Assignments | Exercises | Schedule | Resources & Links | Lab Tutorials

About the Site | Site Map | About Mark | ©2013-2014 Mark A. Rayner