Vertical CSS Menu with Multiple Submenus

When using customized lists to build menus it allows you to easily create submenus. The css is this example is quite long winded as it goes 5 deep. There are a couple of smaller vertical menus on this blog if you prefer an example with 1 or no submenu.

The styles I used to differentiate the 5 menus were
1 - Different Background Color, Bold Text
2 - Bold Text
3 - Regular Text
4 - Regular Text, Indent
5 - Smaller Text, Further Indent

Heres the CSS - whitespace removed
/* Begin Vertical Menu with 4 submenus*/

#vertmenu {height:400px;background-color:#e9ebef;width: 165px;padding: 0px;}

#vertmenu ul {list-style: none;margin: 0px;padding: 0px;border: none;}

#vertmenu ul li {margin: 0px;padding: 0px;}

#vertmenu ul li a {display: block;padding: 5px 0px 2px 5px;text-decoration: none;color: #3c444f;width:160px;font-weight:bold;background-color:#e9ebef;}

#vertmenu ul li a:hover, #vertmenu ul li a:focus {color: #ffffff;background-color: #98abc8;}

/* SubMenu 1 */
#vertmenu li li a:link, #vertmenu li li a:visited {font-weight: normal;background-color:#ffffff;padding: 2px 0 3px 5px;color: #3c444f;font-weight:bold;width:160px;}

#vertmenu li li a:hover {padding: 2px 0 3px 5px;color: #ffffff;background-color: #98abc8;width:160px;font-weight:bold;}

/* Submenu 2 */
#vertmenu li li li a:link, #vertmenu li li li a:visited {font-weight: normal;background-color:#ffffff;padding: 2px 0 3px 5px;color: #3c444f;width:160px;}

#vertmenu li li li a:hover {padding: 2px 0 3px 5px;color: #ffffff;background-color: #98abc8;width:160px;}

/* Submenu 3 */
#vertmenu li li li li a:link, #vertmenu li li li li a:visited {font-weight: normal;background-color:#ffffff;padding: 2px 0 3px 20px;color: #3c444f;width:145px;}

#vertmenu li li li li a:hover {padding: 2px 0 3px 20px;color: #ffffff;background-color: #98abc8;width:145px;}

/* Submenu 4 */
#vertmenu li li li li li a:link, #vertmenu li li li li li a:visited {font-weight: normal;background-color:#ffffff;padding: 2px 0 3px 40px;font-size:11px;color: #3c444f;width:125px;}

#vertmenu li li li li li a:hover {padding: 2px 0 3px 40px;color: #ffffff;font-size:11px;background-color: #98abc8;width:125px;}

/* End Vertical Menu with 4 Submenus */

Here is the html

<div style="background-color:#cccccc;padding:3px;width:165px;">
<div id="vertmenu">
<ul>
<li><a href="">Menu 1 (bold+bg)</a>
<ul>
<li><a href="">Menu 2 (bold)</a>
<ul>
<li><a href="">Menu 3 (reg)</a>
<ul>
<li><a href="">Menu 4 (indent)</a>
<ul>
<li><a href="">Menu 5 (indent, sm)</a></li>
<li><a href="">Menu 5</a></li>
<li><a href="">Menu 5</a>
<li><a href="">Menu 5</a></li>
<li><a href="">Menu 5</a></li>
<li><a href="">Menu 5</a></li>
<li><a href="">Menu 5</a></li>
<li><a href="">Menu 5</a></li>
<li><a href="">Menu 5</a></li>
</ul>
</li>
<li><a href="">Menu 4 »</a></li>
</ul>
</li>
<li><a href="">Menu 3</a></li>
</ul>
</li>
<li><a href="">Menu 2 »</a></li>
</ul>
</li>
<li><a href="">Menu 1</a></li>
<li><a href="">Menu 1</a></li>
</ul>
</div>
</div>