Vertical pop up menu

The following tutorial features a pop up menu written purely in CSS, similar to the one on the BrokenBlade website. The code uses XHTML lists which are then styled to produce the hover effects. No Javascript is used apart from IE browsers as they will not display the hover effect without it. More on that later though, first off we'll begin by creating our menu in XHTML.

We start with an unordered list like so:(put this into your body tag)

This is a simple unordered list with no styling whatsoever. Here's what it looks like. Next the menu is styled. Put those into your stylesheet:

The above CSS code styles the list so that it looks a lot nicer and a lot more like a menu than a list.

There are 4 "blocks" of code and so I'll describe each of them in turn. The first block removes the bullets by setting the list-style to none. The width of the menu is also set. The second and third blocks define the styles for the links.

By setting display to block and giving it a width, the whole of the rectangle the menu item is in will be clickable, rather than just the text. The padding sets a bit of space around the text, and a background colour is set. The third sets colours for a hover style. The last block of code deals with the li element itself.

A 1px border is set to the bottom to differentiate between the menu items. They are also floated left in order to fix a bug in IE that includes a gap under each li. Finally position is set to relative, which enables the pop up menu to be positioned relative to it.

Here's what it looks like now. Now comes the fun part. We'll start off with the "Gallery" menu item.

When hovered over, we want another menu to pup up with a list of gallery categories or similar. So, the HTML is edited to include another list, this time inside the gallery "li" element.

We need to add something to the CSS now too, as we don't want it to display right away. We'll also add some styling for this new list.

The above CSS sets the new list's display to "none", which hides it to begin with. Next we position it absolutely. Remember we set it's parent to position relative? well because we did that we can now position this list relative to the previous one. You may notice that the distance from the left is greater than the width of the parent element, this is because 15px worth of padding was added to it and so in reality its width is 140px. A white border is also added to the left hand side to keep it in style with the rest of the menu. Finally a hover style is given to the first list's "li" element telling it to display any unordered lists it has inside it. This is the line that creates the rollover effect.

Here's what it looks like now.

Fantastic! unless you are using IE that is. Internet Explorer does not think you can give anything other than a link a hover effect, and so ignores it. Because of this there is nothing more we can do that use a bit of Javascript to trigger it to work. This file tells IE to stop being silly allow hover effects on anything.

Place the csshover.htc file in the same folder as your html file and add the following line to the CSS.

Multi leven menus

OK so we've got the menu working great, the above will suffice for the majority of menus, but some might have another level to them. Lets say for example, the products section has some product categories in, and each category has a number of products. In the menu we'd want the categories to show on hover, and then when hovering over each category the products in each category show up in a new level. Here's how to do it.

I wont repeat myself on the first level, And the HTML is the same as previous for each as the code below shows.

Now, a couple of lines need adding to our CSS file.

The first line says not to display the new level when the first level is hovered over. If this were not set then everything would be displayed when the first level of the menu was hovered over. The second line says to display the third level of menu when the second level is hovered over.

This same method can be used over and over to create more levels if needed. Here's the final menu. I hope you enjoyed it...

Note: there will be coming a tutorial for horizontal pop-up menus