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

CSS Library: Horizontal CSS Menus: Here

jQuery Multi Level CSS Menu #2

Author: Dynamic Drive

This is a multi-level horizontal CSS menu created using a regular nested HTML list, then turned into a fully functional drop down menu using CSS and a touch of jQuery. The sub menus slide in and out into view, which also automatically reposition themselves horizontally if too close to the window's right edge.


Important: Make sure your page contains a valid doctype for this menu to render properly.

The external files: The menu requires the following support files, which you should upload by default all to the same directory as your page itself:

If you wish to upload the above files to a different directory, be sure to edit "jqueryslidemenu.js" to update the URLs to the two arrow images used.

The CSS/ JavaScript: The below code should be added to the HEAD section of your page:


Code Info

Rate this code:

Date Posted: 11/03/2008

Revision History: Nov 8th, 08': Limit # of queued animations to prevent animation stuttering

Usage Terms: Click here

Your Comments (187)

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 11 of 19 pages « First  <  9 10 11 12 13 >  Last »

Love the nice clean approach, and it's testing beautifully. Have hit a wall when trying to program a "current" state for top level items. Any suggestions?

Thanks so much!
Posted by Sylvia King on 02/10, 08:53 PM
"I am trying to configure the menu so the dropdowns have a 70% Black Opacity and the top-level menu buttons have a non-transparent background-image that repeats x. Is there a way to configure this to work that way?"

I need the same thing... I want to add a background image for the main menu like the one in this menu: but with no indent. Just one static image with a repeat...

I would also like to change the color of the drop down. Can you help?
Posted by Dl on 02/11, 11:09 PM
Major bug in Chrome browser... dropdowns rendered in the middle of the page very frequently... *PLEASE FIX*

Same bug with this one:
Posted by SUSAN HARRIS on 02/13, 10:44 AM
As for removing the arrows...another workaround for removing the arrows is that you can replace the arrows with transparent gif's that way you can put them back in if you decide you need them afterwards. I replaced the down arrow but left the right arrow in.
Posted by James on 02/13, 01:47 PM

Great work here. I am looking for to use this menu where it will be Right to left aligned (with direction:RTL css property)

Any help is appreciated, and thanks in advance,
Posted by Suhas on 02/15, 08:59 AM
For those of you who are have problems with the sub-menu disappearing behind other page elements:

I found that if I set a div to position:relative, my submenu would disappear. I removed it and it now works.
Posted by NC on 02/16, 05:48 PM
Hello, does someone have advice as to how to convert this menu into a pop-up/drop-up menu?

I would like to position it at the bottom of a page and have the items appear above the navigation.

Posted by Christopher on 02/16, 06:23 PM
Actually, I am still having a problem with the sub-menus going under other page elements. I was able to fix the table issue but now I have a flash video and the sub-menus are going behind it.

I've tried setting the z-index properties but i haven't had any success.
Posted by NC on 02/16, 06:25 PM
I'm still having problems with the sub-menus disappearing behind certain page elements, specifically flash files.

Does anyone have a fix for this? I've tried setting the z-index but it doesn't work.
Posted by NC on 02/16, 06:27 PM

This menu is great, however I've found a bug. I have a vertical menu on the page also written in js. This menu displays behind the vertical one and I don't know how to make it display at the front..please help!! Thanks
Posted by Kim on 02/16, 10:31 PM

Comment Pages 11 of 19 pages « First  <  9 10 11 12 13 >  Last »

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