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 1 of 3 pages  1 2 3 >

how can i add the right arrow image? sorry for askin .. newbie here thanks for helping me in advance
Posted by Freakinerick on 03/24, 11:57 PM
Is there a way to run the multiple layer menus without a script?
Posted by Chris on 03/25, 08:33 AM
That's what i needed, compatible to the …ucking IE6 an IE7.

Very good work! Thank you!
Posted by typo3ler on 03/26, 02:31 PM
I like to add the picture "arrow" and don't know how to do it. Need help please. This is a fantastic script and now I can't do without
Posted by Nadeem Khan on 03/27, 03:01 PM
how to make this menu appear up to every things in my page
Posted by Mohammed Jalala on 04/01, 01:18 AM
I'm a beginner, how dow I create a nice drop menu from csratch, and where do I place the css in my html?
Please explain everything. Thak you.
Posted by Celon G on 04/08, 03:25 PM
How do you keep the menu from moving? I want it to be fixed but it moves depending on the text in the body.

Thanks for the code; it's great! =)
Posted by Ziggy T on 04/13, 06:16 PM
Can I control how the sub menus display? MY menu will have more subitems than the screen can show so I would like the submenu to automatically shift according to the availble screen space. (Like microsoft does when you are browsing through folders on my computer...if theres not enough room to drop the menu below it drops it up.) Can this be done in style sheets? Can someone tell me how?
Posted by Janice on 04/14, 11:01 AM
This is nice. Thanks.
Posted by gratis on 04/17, 07:06 AM
Hi. Thanks for this great menu.

However, I seem to have found a bug. It appears that long (wrapping) text in submenus will not appear on IE 7.

Increasing the size of the submenu ul fixes the problem, but this has to be tested manually every time the menu tree contents are updated.

Are there any other solutions?

Posted by Daundefinedoud on 04/23, 06:10 AM

Comment Pages 1 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.