Drop-down menu

This is a more or less standard style of drop-down menu where the mouse hovering over the horizontal menu items causes a vertical submenu to appear. Some people, like me, find it slightly irritating to have anything blocked by something else. It is not super important but if the menu items are arranged carefully and the sub-menus are not too verbose, it can be avoided by having the submenu appear horizontally, in the space carefully provided for by an appropriate top margin for the element next down, namely the content.

One of the factors that causes the submenu items to appear vertically is that they simply have no room to do otherwise, their width is constrained and so they wrap. Their verticality is a side effect.

Using this knowledge, one can easily manipulate things to be different to make the sub items appear horizontally. This might suit some designs. The advantage being that there is no irritating blocking off of content by other content. See an example of a pop-out horizontal menu

The basic strategy of this comes from an outline at htmldog.com/articles/suckerfish/drop-downs/. I have styled and modified a few small things, that's all.

There is almost never a really good reason to use drop-down menus. They are quite an irritation to some people, they have usability issues, they are almost always used where it would be better not to use them. They are a challenge for the author to get to work reasonably well in many contexts. All these things will ensure that they are very popular and irresistible!