Simple CSS Vertical Menu with Submenu

Using the exact same code and background image from Simple CSS Vertical menu with images, I have added a small indented submenu. I will not repost the whole code, just that of the submenu. Click link above to see how the original vertical menu was created.

Things to note here are adding a background color again to override the background image from the main menu, and the padding to shift the submenu 20px to the right.

For an image free vertical menu with multiple submenus check out Vertical CSS Menu with multiple submenus.

/* subMenu */
#vertmenu li li a:link, #vertmenu li li a:visited {
font-weight: normal;
background:#e9ebef;
padding: 2px 0 3px 25px;
color: #3c444f;
width:135px;
}

#vertmenu li li a:hover {
padding: 2px 0 3px 25px;
color: #ffffff;
background-color: #48505b;
width:135px;
}

Here is the html, what has changed here, is that you need to embed the submenu, as a new list in the <li> element of the first list

<div style="clear:both;width:160px;background:#e9ebef;height:200px;">
<div id="vertmenu">
<ul>
<li><a href="">Home</a> </li>
<li><a href="">About</a></li>
<li>
<a href="">Events</a>
<ul id="submenu">
<li><a href="#">» Event 1</a></li>
<li><a href="#">» Event 2</a></li>
<li><a href="#">» Event 3</a></li>
</ul>
</li>
<li><a href="">Gallery</a></li>
<li><a href="">Contact</a></li>
<li><a href="">Site Map</a></li>
</ul>
</div>
</div>