Hostgator coupons for up to 99% off hosting for Dynamic Drive visitors!
Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library

CSS Library: Vertical CSS Menus: Here

Nested Side Bar Menu

Author: Dynamic Drive

This is a simple yet professional looking multi level side menu. Markup wise it's just a regular nested UL list, turned into a drop down menu using a very small JavaScript code. Note that the menu's background should be a solid color instead of a background image, as the later property is reserved to show the right arrow images that appear next to menu items with additional sub menus.


The Right Arrow Image:

The CSS:


Code Info

Rate this code:

Date Posted: 03/20/2009

Revision History: None

Usage Terms: Click here

Your Comments (24)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.

Comment Pages 3 of 3 pages  <  1 2 3

Thanks for the code; it's great! =)
Posted by Wpdigger on 06/02, 09:35 PM
the sub menu text color did not change, how can change it to gray?
Posted by ben on 06/05, 02:40 AM
Posted by senthilkumar.g on 06/06, 03:17 AM
<div id="container">
<div id="header_container">
<div id="pre_header"></div>
<div class="header"><h1 id="header"><span>Stako(မဂၤလာပါ)</span></h1></div>
<div id="post_header"></div>
<div id="nav_container">
<h2 id="nav_heading"><span></span></h2>
<ul id="nav">

<li class="nav_element checked_menu" id="nav_Home"><span><font color=#>Home</font></span></li>

<li class="nav_element subpage" id="nav_MainStako"><span>Main Stako</span></li>

<li class="nav_element" id="nav_MailsService"><span>Mails Service</span></li>

<li class="nav_element" id="nav_WikiSTAKO4"><span>Wiki(STAKO4)</span></li>

<li class="nav_element" id="nav_AboutMyanmar"><span>About Myanmar</span></li>

<li class="nav_element" id="nav_burmanews"><span>burmanews</span></li>

<li class="nav_element" id="nav_niknayman"><span>niknayman </span></li>

<li class="nav_element" id="nav_sharingyoochun"><span>sharingyoochun</span></li>

<li class="nav_element" id="nav_tenissrbija2008"><span>tenissrbija2008</span></li>

<li class="nav_element" id="nav_Calculator"><span>Calculator</span></li>

<li class="nav_element" id="nav_secondwin"><span>secondwin</span></li>

<li class="nav_element" id="nav_learnphotoshop"><span>learn photo shop</span></li>

<li class="nav_element" id="nav_Gallery"><span>Gallery</span></li>
<div id="content_container">
<div id="pre_content"></div>
<div id="content">
Posted by STAKO on 06/10, 09:08 AM

Comment Pages 3 of 3 pages  <  1 2 3

Commenting is not available in this weblog entry.
Copyright 2006-2015 Dynamic Drive Read our Usage Terms before using any of the CSS codes.