Drop Down Llama Menu

Oh yet another pure CSS drop down menu. But instead of the menu being triggered by placing your mouse of the menu label, it is trigger by moving your cursor over the down arrow on the right side of the menu label.

Drop-Down Marker

The drop-down marker is created from the nested list <ul> that makes up the pop-up-menu. The marker graphic is the background image for the list. Additional to the marker is some positioning to get it to the right and to set the width and height to match the graphic size.

ul#nav > li > ul{ /*I would have prefered to position at as the following: position: absolute; right: 5px; top: 4px; That takes advantage of the container box rules; but that does not work to well in the browsers. */ float: right; width: 17px; height: 20px; margin-top: -24px; margin-right: 5px; padding: 0; background-image: url("graphics/dropdown.png"); z-index: 50; overflow: hidden; }

Menu Items

The menu items are hidden based on a trick from pixy. Instead of doing the obvious thing and not display (display: none;) the list items , I set the overflow for the <ul> to hidden and push the <li> off the screen. By doing this, it works around the bugs in some of the browsers.

ul#nav li ul li{ position: absolute; margin-left: -9000px; } ul#nav > li > ul:hover > li{ display: block; width: 117px; margin: 0 0 0 -99px; padding: 0; position: relative; z-index: 500; }

Return to CSS Play.

2003 Seamus P. H. Leahy
You may take and improve upon this.
Original: 2003.10.18