Barebones vertical Nekkidblogger flyout menu - three CSS rules

Introduction

The vertical flyout menu uses the ultra efficient Nekkidblogger menu framework, the same as I used for the horizontal CSS drop menu. It uses an accessible, standard UL (unordered list) classed with classes for the levels of the menu. The HTML is the same as shown in the post about the Nekkidblogger menu.

The Nekkidblogger horizontal dropdown menu runs on five structural CSS rules, and is light, simple and very fast:

#nekkidblogger li { list-style:none; position:relative; float:left;
    text-align:center; margin-right:5px; font: 10px verdana, 
    sans-serif; } (Rule 1)

.level2 { position:absolute; top:30px; left:0;  }  (Rule 2)

.level3,.level4 { position:absolute; top:0; left:8em; } (Rule 3)

.level2,.level3,.level4 {visibility:hidden} (Rule 4)

#nekkidblogger :hover > ul { visibility:visible; }(Rule 5)

As simple as they are, these rules can be simplied even further in a vertical flyout menu, where all the levels are vertical.

The "barebones" version"

#nekkidblogger li { list-style: none; position: relative; width: 8em;
   vertical-align: bottom; font: 10px verdana, sans-serif; } (Rule 1) 

.level2,.level3,.level4 { position: absolute; top: 0; left: 8em;
    visibility:hidden; }  (Rule 2)

#nekkidblogger :hover > ul { visibility:visible; }(Rule 3)

Final remarks

The slightly more styled version of this menu is the Nekkidblogger vertical flyout menu. There you also find more discussion of the style rules. It may be of interest to notice that you could expand it to for example five levels of flyouts by simply adding ".level5, .level6" in Rule 2.

If you look at it in IE 7 you can see the vertical gaps I discussed in the main post. You can also see that the flyouts do not work now that the menu is not styled. I will not bother with the fixes here, however.

PS: Stay tuned for more postings on the Nekkidblogger menu. I will show more extensions of this efficient framework.

Copyright

I spend lots of time on development and posting. Therefore I kindly ask that you respect my copyright.

1. If you are using this on a personal web site then please retain the copyright comment in the stylesheet. A donation to Nekkidblogger is requested.

2. If you are using this on a commercial web site, or as a paying job for a client, then please email me asking for permission - peter{at}nekkidblogger.com. A donation to support 'Nekkidblogger' is required. USD 25 per client seems a fair suggestion.

3. If you are having problems integrating it into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.

Terms and Conditions

This menu can be used subject to the following terms and conditions:

• 1.If you wish to use this menu in your website(s) you can do so.
• 2.You may NOT place this menu on another site for others to download.
• 3.You may NOT redistrubute or resell this menu.
• 4.Users agree not to remove or edit the credit notice within the stylesheet, or claim that this menu is their own.

Files

Pay me $ 10 with Paypal and send me a mail about it, and I will send you the HTML, CSS, and JS in a zipped file. Send $100 and I'll give you 1 hour of support by email as well.