Description:
This is a lean CSS vertical menu. The markup is entirely based on an ordinary HTML list, with support for 1 level of nested lists. The nested lists are transformed into 2nd level drop down menus that appears dynamically onmouseover. The entire menu interface is styled via the external CSS, even the arrow image that appears
automatically
beside menu items that carry a 2nd level. Enjoy!
Example:
Directions:
Step 1:
Add the following code to the
<link rel="stylesheet" type="text/css" href="cssverticalmenu.css" /> <script type="text/javascript" src="cssverticalmenu.js"> </script>
It references two external files and 3 images. Download them below (right click, and select "save as"):
- cssverticalmenu.css
- cssverticalmenu.js
-
The three images (resized):


Step 2:
Add the below HTML to your page, which contain your menu links:
<ul id="verticalmenu" class="glossymenu"> <li><a href="http://cssvertical.com/css-library">CSS Library</a></li> <li><a href="http://cssvertical.com/CSS-Vertical-List-Menu" >CSS Vertical List Menu</a></li> <li><a href="http://cssvertical.com/css-vertical-text">CSS Vertical Text</a></li> <li><a href="#">CSS Advanced</a> <ul> <li><a href="http://cssvertical.com/CSS-classification">CSS classification</a></li> <li><a href="http://cssvertical.com/CSS-dimension">CSS dimension</a></li> <li><a href="http://cssvertical.com/CSS-Image-Gallery">CSS image gallery</a></li> </ul> </li> <li><a href="http://cssvertical.com/css-simple" >CSS Simple</a></li> <li><a href="http://cssvertical.com/CSS-HowTo">CSS How To</a></li> <li><a href="#" >Helpful Resources</a> <ul> <li><a href="http://cssvertical.com/CSS-background">CSS background</a></li> <li><a href="http://cssvertical.com/css_vertical">CSS vertical</a></li> <li><a href="http://cssvertical.com/CSS-border">CSS border</a></li> <li><a href="http://cssvertical.com/css_display">CSS display</a></li> <li><a href="http://cssvertical.com/CSS-font">CSS font</a></li> <li><a href="http://cssvertical.com/css_image">CSS image</a></li> </ul> </li> </ul>
That's it! You may want to take a peek inside
cssverticalmenu.js
for optional subtle tweaks to the menu.