Free CSS Drop-Down Menu Framework

Features

• Modular, with themes. Not only HTML is separated from CSS, but even CSS definitions are categorized into structural and thematic types. Thus creating a new css drop-down menu means creating only a new theme since structure is permanent. What is more, creating a new theme is easy with available templates and takes 10-15 mins.
• Easily deployable. The code and files are well organized. Available channels to hook up to your CMS or other tools as well as existing websites in XHTML format.
• Easily transformable. Can be transformed by changing class name only. Available transformations: horizontal, vertical left-to-right, vertical right-to-left, horizontal linear, horizontal upwards.

• Cross browser. Configurations available for Windows Internet Explorer 5 or later, Mozilla Firefox 1.5 or later, Opera 7 or later, Apple Safari 2 or later, Google Chrome 1, etc.
• JavaScript only for IE. Minimal JavaScript code only for IE 6 or earlier. Can be used with popular JavaScript libraries Jquery or Scriptaculous. Everything else is pure CSS.
• Super Fast. Having the above mentioned features it is not affected by any disturbances whatsoever.
• Continuous development. The project is constantly revised and improved.

Showcase

Download

This CSS Drop-Down Menu is free and licensed under the GNU General Public License.

Download now!

Please consider donating to support further development:

Amount in USD:

Thanks!

Leave your comments, questions, feature requests, etc.

Please participate actively to recieve extras an bonuses. Send in your themes or leave links where you're using this framework to be published and improved here. Also you can provide links of desired drop down menus out there that you would like to be implemented with this framework. Additional mimic themes will be here for download afterwards. If you have any comments, questions, feature requests or anything else please use the form below.

You are allowed to use the following tags: <a>, <strong>, <em>, <u>, <code>, <blockquote>

* Indicates required fields

• * Name:
• * E-mail: (will not be published)
• Website:
• Your favourite drop-down menu online:
  
• * Comment:
• * Code:

Comments

• January 6th, 2009 at 1:34PM (+2 GMT)Saskia wrote:

  Great work! I Love this framework... I use it in the future

• January 3rd, 2009 at 10:51PM (+2 GMT)Big D wrote:

  For those who wish to use the drop down menu's found here, and need to place it over flash, it is not difficult at all, and you do not need to do any additional hair pulling.

  Simple add this to your embed coding: menu="false" wmode="transparent"

  example:

  That code is not in theirs, but after I placed it in the video's embed, works great.

  And as a side note, doing this also DOES work for both IE and Firefox.

  Cheers and happy coding.

• January 2nd, 2009 at 3:09PM (+2 GMT)Loors wrote:

  The examples are getting better and better, but it seems to have an important problem. There's no active state in the menus. Without this any menu is not user friendly. Do you plan to build a version that includes the current state of the menu, or is this up to the final users? It would be interesting to develop a solution together, this menu is great but without the current/active state it's almost impossible to apply this in a commercial website.

• December 31st, 2008 at 7:41PM (+2 GMT)some one wrote:

  Impresive !!!
  Is there a way to show an animation while the menu expands ?

• December 31st, 2008 at 6:14PM (+2 GMT)Ian Mitchell wrote:

  Is there any way to deal with the famous problem of the IE SELECT controller ignoring z-index?

  When I pull down a menu over a SELECT controller, the controller shows through your pulldown.

  There are various solutions out there, but I was wondering if there is one that works well with your menu implementation.

  Wonderfull menu BTW!!!!

• December 30th, 2008 at 8:07PM (+2 GMT)Robert B. wrote:

  I noticed that the adobe drop-down has no flyouts. Were you unable to do flyouts for that particular design? I really like the design of the adobe.com one and wanted to use a similar design for the site I'm doing. Unfortunately, my employer needs flyouts. Is there a way to do that for the adobe.com design? ((P.S. when I try to redesign simple horizontal to look similar to the adobe.com design, I come up with all sorts of problems.))

• December 30th, 2008 at 8:00PM (+2 GMT)ned ryerson wrote:

  Flash content appears below background in firefox 2.0 (on intel mac running OS 10.5). I can see the swf object when the page is loading; but then when the bg loads, it disappears. However, it is still there and can be clicked on. It is just nor visible.

• December 29th, 2008 at 3:47PM (+2 GMT)Micha M. wrote:

  hey, it´s me again.
  sry don´t wanna be annoying, but is the nvidia menu in the package now?!
  that would be so awesome...please!

• December 27th, 2008 at 5:13PM (+2 GMT)To ryan wrote:

  ryan, sure you can use it. What exactly is your problem on IE? All my tests were successful on IE.

• December 25th, 2008 at 8:56PM (+2 GMT)ryan wrote:

  Hi I love your menu, can I use it?

• December 25th, 2008 at 8:14PM (+2 GMT)Vernon Young wrote:

  Hi ILOVE YOUR SIMPLE VERTICAL MENU AND WANT TO PUT IN OUR WEB SITE ON THE LEFT HAND SIDE TO REPLACE THE VERTICAL ONE I HAVE NOW. I AM A BEGINNER AND EVERYTHING IS NEW TO ME IF I SEND YOUR MENU ALONG WITH MY PAGE IN A ZIP FILE CAN YOU PUT THE TWO TOGETHER.
  I WILL DONATE WHAT EVERY YOU SAY. VERNON

• December 24th, 2008 at 1:15PM (+2 GMT)khaled el harty wrote:

  Simple vertical right-to-left

  just have a problem with IE6 the menu features is disabled it is working fine on IE6 but 6 no way i want to slove this problem how can i solve it please

• December 23rd, 2008 at 2:06PM (+2 GMT)Rin wrote:

  The drop-down menu without js!

• December 21st, 2008 at 4:34AM (+2 GMT)Syb wrote:

  Great menu's new to CSS and these (hopefully) will make my site fantastic

• December 18th, 2008 at 9:56PM (+2 GMT)Micha M. wrote:

  Is the Nvidia.com menu already in the package, if not, when is it gonna be in it?!
  i really love it, and would like to use it, it´s great.

• December 18th, 2008 at 2:39PM (+2 GMT)Stuart wrote:

  Wonderful, thanks for all your effort.

• December 15th, 2008 at 10:33PM (+2 GMT)Jeevan wrote:

  Thanks for sharing these great menus.

• December 12th, 2008 at 3:56PM (+2 GMT)tenou wrote:

  thanks. will like to test on it.

• December 12th, 2008 at 9:38AM (+2 GMT)David Rodríguez Estévez wrote:

  Estos estilos CSS con HTML son super en verdad, faciles de adaptar a cualquier sitio solo entrando en la parte de los codigos y cambiandolo a gusto de nosotros mismo, debería tener muchos más ejemplos y dar la pisibilidad de descargarlos a todas aquellas personas que les interese la creación de sitios web con calidad...

• December 11th, 2008 at 12:04AM (+2 GMT)Andrey Viana wrote:

  Awesome, no comments, just perfect!

• December 10th, 2008 at 9:05PM (+2 GMT)alfador wrote:

  I love nvidia mimic theme could you make it avaliable to download ?

• December 10th, 2008 at 6:00PM (+2 GMT)Grady wrote:

  Curious if there is a way to use jquery more, and delay the mouseover and mouseout times so they don't completely go away? A lot of users have a hard time keeping their mouse on the menu target.

• December 10th, 2008 at 11:17AM (+2 GMT)fanfarian wrote:

  Hi,

  looks good on any browser exept IE 8 beta2.
  Are there any plans for developing a version for this one?

  cheers
  fanfarian

• December 9th, 2008 at 5:52PM (+2 GMT)jim wrote:

  What I meant was how the files should be stored on your webserver and then be utilized in an existing css.

• December 9th, 2008 at 5:51PM (+2 GMT)jim wrote:

  Are there any instructions on how to store the files in the download and incorporate them into the css of an existing website?

  Thanks,

• December 8th, 2008 at 9:18PM (+2 GMT)Grady wrote:

  I am using the MTV style menu. I want to make it so that the initial drop aligns to the left side of the main menu element, instead of the right, like the flickr style menu does. I tried finding the css attribute that does this with no luck. Could ya help?

  Thanks.

• December 8th, 2008 at 1:12PM (+2 GMT)Xevo wrote:

  Looks nice, I'll try it out on a new website that I'm currently developing.

  Thanks.

• December 8th, 2008 at 7:17AM (+2 GMT)Timothy Bowers wrote:

  Excellent, I love the menu's, especially how it on the MTV mimic theme.

  Thanks!

• December 5th, 2008 at 2:16PM (+2 GMT)Andi wrote:

  Hi,

  I'm VERY impressed by your work. I only got a simple (?) problem: Is it possible to center the menu (-> http://www.lwis.net/free-css-drop-down-menu/dropdown.simple.linear.html)? Left/right alignment is clear (float:left/right), but all my trials to center the menu failed (div around with "margin: 0 auto;" is not the way to go I think cause the div grab the most space it can get and it looks like before ;-]).

• December 5th, 2008 at 11:39AM (+2 GMT)CCR wrote:

  First, thank you very much for this code!

  I have managed to get it spot-on in FF, but in IE half of the CSS settings are getting ignored.
  Are there any of the parts in the .css files that are IE specific?

  My problem is in the formatting of the drop down lists - background etc not working in IE, but perfect in FF

  _Thank you...

• December 4th, 2008 at 5:40PM (+2 GMT)Tom wrote:

  I am putting together a new package, which will include NVIDIA, other new skins and more.

  As for the timer and click functions, this obviously needs JS support. I might actually add that too in the next release.

• December 4th, 2008 at 5:56AM (+2 GMT)Rob wrote:

  I downloaded this pack, but I cannot find NVIDIA menu. Is it maybe not available?

  Thanks

• December 3rd, 2008 at 9:59PM (+2 GMT)Patrick Wilber wrote:

  Please consider using the LGPL instead of the GPL. Technically, css/html is always "open source", however, when using server side includes, etc., the GPL causes some stickiness if used in commercial websites.

• December 3rd, 2008 at 11:06AM (+2 GMT)Brian Jones wrote:

  I know with css based drop downs that they fade away after a certain time, but with drop downs that are long they can fade away too quickly. Is it possible to add a timer function so that they stay longer (this would mean javascript I guess as css can't give this) or would having a click function on the menu work better. Again css won't support this will it?

  thanks, in all other respects a fabulous drop down framework.

  Brian

• December 1st, 2008 at 5:49PM (+2 GMT)To Qamer wrote:

  The idea of the Adobe menu as well as other themes on the right hand side was just to mimic the original menu. Nothing more, nothing less. Therefore I have no plans to add more weight on them.

• December 1st, 2008 at 8:20AM (+2 GMT)Qamer Farooq wrote:

  Hi

  Thanks for your nice css based menus.

  I am using your adobe style menu, but i want to add sub-menu support to it can you please help?

  Qamer

• November 30th, 2008 at 1:04PM (+2 GMT)To koper wrote:

  Make sure you have your website in XHTML format before using this CSS solution. I mentioned above that it's easier to deploy the script in valid XHTML websites.

• November 28th, 2008 at 7:00PM (+2 GMT)koper wrote:

  hello, i put free css in my web... is fantastic thx!

  in Firefox runs ok, but in explorer 7... only shows the first links.

  can you help me?

  thx very much

• November 28th, 2008 at 12:55PM (+2 GMT)daotuanhung@gmail.com wrote:

  I like your work, love to see a rounded-corner menu, will donate some $ shortly :D

• November 27th, 2008 at 12:15AM (+2 GMT)Ted Liptak wrote:

  Very useful staff, thanks

• November 23rd, 2008 at 11:46AM (+2 GMT)Tom to johannes wrote:

  I think I made myself pretty clear regarding browser compatibility. See item "Cross browser" above. I have no reason to think that it might not be working on Konqueror. Maybe someone can confirm this please. Things are interrelated in websites. If something doesn't work, mostly it's users' fault.

  There hasn't been an update to this framework.

• November 23rd, 2008 at 1:23AM (+2 GMT)johannes swoboda wrote:

  Hi,
  very interesting framework, but
  Do you have more specific information about browser compatibility?
  for example, what about IE7, IE8, newer opera, Firefox on mac, linux, Konqueror on linux, ...
  I also can't see when you made your last changes on your framework,
  that would also help me to know about if this is actual code.

  regards, joe

• November 21st, 2008 at 2:48AM (+2 GMT)David Cheney wrote:

  I'm just looking at the samples and everything looks very nice. One feature I'd like to see is having a "simple horizontal" menu with a Google custom search box aligned to the right but on the same line as the menus.

  Is that too messy to get the form in there?

  Thanks,
  David

• November 19th, 2008 at 1:20PM (+2 GMT)pavani wrote:

  very usefull to others.......

• November 18th, 2008 at 9:46PM (+2 GMT)To Petrus wrote:

  I didn't build in code for current/on state. I left this up to the user. You'll see this in the next version hopefully.

  I think that your solution makes sense. If you have a single selected item, you probably want to use an 'id' selector as in your example. If you have multiple selected items, you should be using a custom 'class'. In the latter case, you'll probably need to style first-level items and non-first level items separately.

• November 18th, 2008 at 6:47PM (+2 GMT)Chris wrote:

  I dont think that will work, because it will afect all submenus under the main . If you place that orange all submenus with link will appear orange.

• November 18th, 2008 at 5:30PM (+2 GMT)Petrus wrote:

  Just to add, that i get it to work by editing something like this:

  #n-home-on {border-top-color: #5db1e0 !important;
  border-left-color: #5db1e0;
  background-color: #4498c7;
  color: #fff;}
  Do you think this is the best way?

• November 18th, 2008 at 5:25PM (+2 GMT)Petrus wrote:

  Hello. First of all thanks for the framework, its fast and it presents less problems than some of the "notorious" dropdown menus available in js. I just have one question. I'm trying to define a current state in the main menu. Im using the mtv theme but i've already costumized it. But when i try to define a current state, lets say in the current page the menu item remains blue, i can't get it to work.
  Right now i don't know if the framework was prepared for this situation and i ruin it, or if this wasn't a possibility from the start. Can you tell if this is possible or if i have to customize elements to get it?

• November 18th, 2008 at 10:02AM (+2 GMT)To Bruce wrote:

  What exactly is your problem?

• November 18th, 2008 at 9:59AM (+2 GMT)To Alper wrote:

  You need this:

  ul.dropdown a.open,
ul.dropdown li:hover > a.dir {
color: #06c;
}

• November 17th, 2008 at 8:23PM (+2 GMT)Bruce Watson wrote:

  when I use the dropdownmeu code for jquery - I have *.asxp dotnet pages - they do not instance from the menu. Any idea on the problem. How do I transfer to aspx page usign jquery?

• November 17th, 2008 at 2:35PM (+2 GMT)davarciforum wrote:

  thanks a lot

• November 17th, 2008 at 12:40PM (+2 GMT)Alper wrote:

  Hi,
  thanks for these great menus.
  I use adobe's menu.when I link for IE's visibility .js It does not work.so I attached js to my document inline and it works perfect..

  now I'm trying to add a selected class to top level menu but I don't know how I make.
  I use a transparent background and when I hover top level menu it's background white and links are blue.but when I hover the sub-menus, top level link it turns white.I want to keep it blue.

  here is my .css.could you help me?

  ul.dropdown li {
padding: 7px 12px;
background-color: transparent;
color: #fff;
}
ul.dropdown li.hover,
ul.dropdown li:hover {
background-color: #fff;
color:#fff;
}

  ul.dropdown a:link,
ul.dropdown a:visited { color: #fff; text-decoration: none; }
ul.dropdown a:hover { color: #06c; text-decoration: underline; }
ul.dropdown a:active { color: #06c; }


• November 16th, 2008 at 6:21PM (+2 GMT)marco wrote:

  I can't get this to work in IE8, is this working on IE at this time?

• November 13th, 2008 at 6:38PM (+2 GMT)Tomas wrote:

  Hi, I have written a drop down JS script for IE for MooTools framework.

  When I found out yesterday (thanx to Tom!) that the drop down with jquery doesn't work on my WP blog which uses scriptaculous/prototype scripts, I simply removed them from the blog header. But later on I found, that these libraries are used by another plugin (LighBox2), which I use on my blog for image galleries.

  So then I tried to look for different plugin, which will not need the scriptacolous/prototype libraries and I found tiny skinny SlimBox (http://www.4mj.it/slimbox-wordpress-plugin/), which is smaller and compatible version of LogtBox. So I tried to install it but unfortunatelly, the dropdowns menus in IE didn't work again - the reason is, that SlimBox uses another JS framework called MooTools. So I assume that this is going to be some major compatibility problem between jQuery and other JS frameworks.

  This sounded as a challenge for me so I started debugging and playing with MooTools and finally after 4 hours of hard work and a lot of dead ends I ended up with 10 lines of code which makes the IE dropdown menus work again.

  Here is the JS code - http://londynan.cz/wp-content/themes/londynan/menu/js/mootools/mootools.dropdown.js - feel free to download and test it, hope that it will help someone. Let me know if something is not working since I have tested it with IE6 only, cheers.

  And I would like to say thanks again to Tom for all the hard work he has made on this plugin.

• November 12th, 2008 at 10:35PM (+2 GMT)Tomas wrote:

  I can confirm that there is a problem with the menu on Wordpress blogs, as the wordpress uses the scriptaculous and prototype scripts by default. I have temporarily fixed that by removing these scripts from the header of the blog.

  I simply comment wp_head() function in my wordpress theme as I do not use these JS anywhere on my pages.

  Many thanks to Tom for his time and advices, good job, cheers!

• November 12th, 2008 at 9:15PM (+2 GMT)James wrote:

  Tomas, can you help me with the prototype version of this script, or maybe a pure js version?
  My site already uses prototype and when i load the jquery version, my ajax call stop responding.
  Thanks in advance!!

• November 12th, 2008 at 6:41PM (+2 GMT)Tomas to Tomas wrote:

  Hi Tomas,

  I'm gonna try to give you a hypothesis here and talk about some general stuff for everyone to learn.

  This one is for everyone. Jquery does not play nice with Scriptaculous. My Scriptaculous extension for this CSS drop down menu as of today is on hold, not yet ready. Maybe somebody does already have it and can share with us please?!

  Since your drop down works well on IE7, as far as I can see, this is a JavaScript issue, most probably the Scriptaculous files that you're using interrupt something. The solution for you would be to either use version named 'Simple Limited' (see simple.limited.html) or wait for the Scriptaculous extension or write it for all of us.

• November 12th, 2008 at 4:46PM (+2 GMT)Tomas wrote:

  Hi, I have tried to implement the menu on my pages but end up stuck with the IE version - it doesnt want to show up ;/

  I have slightly modified the structure of the CSS and JS directories (would like to make a WP plugin from it later) - the menu works perfect on Firefox, but the hover's won't show up with IE. I guess it will have something with my current CSS code, plese - could you take a quick look on it? I have spent 2 days investigating the behaviour but no success after that, many thanks!

  The page is londynan.cz (please don't mind the texts on page, as they in Czech language :) - the menu is under the logo (and yeah, I know that there are some other issues with CSS for IE, I will take care of them later as I develop on Firefox :)

  Cheers!

• November 8th, 2008 at 6:36AM (+2 GMT)Eric wrote:

  Thank you, Tom, for your quick response and for helping me address my weaknesses that caused the problem. The script works just fine now.

• November 7th, 2008 at 10:26PM (+2 GMT)Tom to Eric wrote:

  Hi Eric,

  Don't say that THE "drop down menu doesn't work in IE7", cuz you're scaring people :) The drop down actually works on all browsers, including yours IE7, but it's just that you have a very messy css, invalid custom css. I fixed it in 4 easy steps: (1) added z-index: 50; to .header; (2) added z-index: 51; to .menu and .safari .menu; (3) added z-index: 40; to .container and (4) added z-index: 45; to .footer.

  See my version of HTML and CSS.

  What did we all learn from this example?

  For flash objects it is better to you a reliable JS solution, e.g. SWFObjectfor this purpose. Does anyone else know any other projects? Also the flash object that is behind the drop down menu should be in transparent mode. That means the "wmode" param should be set to "transparent".

  What is more, if you got a lot of elements positioned relatively or absolutely, please make sure to go through them all and add the "z-index" parameter in an consistent manner. By the way, this menu occupies stacks 597-599.

• November 7th, 2008 at 2:59PM (+2 GMT)Eric wrote:

  Hi, Tom. Thank you for making these menus available. I'm using a simple, horizontal drop-down menu on a client's Web site I'm developing that I've included in the Website box. However, I have two issues and I'm writing to find out if you have any suggestions.

  (1) The drop down menu doesn't work in IE7. It works just fine in Firefox 3.0.3 and Safari 3.1.2. I've tried everything I can think of to expose the problem but I can't find one.

  (2) The client wants to have the drop-down menu background underneath Loan Status Updates to be transparent. I know there are ways to create a transparent background and have the text opaque, but given your warning in your last message I figured I should ask you about how to approach this.

  Thanks,
  Eric

• November 7th, 2008 at 10:23AM (+2 GMT)Tom to Jennifer wrote:

  Jennifer,

  thanks for your feedback and for using this css drop down menu!

  Since I don't have any documentation here, first of all I want to point out some general good practices for everyone who might be reading this page.

  First and foremost, do not edit my core files (all files that start with dropdown. and are in the dropdown directory). If you think there's something to be improved there, let me know and I will release an update having it tested with everything else and across all browsers.

  Also I recommend using separate files for this project. Keep it the way it is - oraganized and in a right order. That means classes (with '.') should precede elements (with '#').

  Having that said, I see that you edited the line height in the main core file (dropdown.css). Please change it to the default value. This will fix the "distance glitch". Timing in CSS is not a controllable param.

  Secondly to space out the list items add 'padding' instead of 'line height' to all 'li' items.

  See my take on it with an amended css file.

• November 7th, 2008 at 5:57AM (+2 GMT)Jennifer wrote:

  Menus are the bane of my existence. Your menus look great, it's a snap to update the links, and easy to alter the styles.

  I'm using the simple horizontal linear style. In Firefox (3.0.3) I am having a problem with accessing the second level of links. Moving the cursor the short distance between the top level link and the secondary ones, the secondary ones disappear. Sometimes I can manage to get to the second level, other times I cannot. Is there any way to change the timing, or is there some sort of no-man's-land I'm passing over that causes this? I don't seem to have this problem in Opera, Safari, IE6, or IE7.

  Oh and what does the csshover.htc file do? Do I link to it? Just put it in the same directory as everything else?

  I have a test page up at www.kaaswilson.com/testfolder/0819.shtml. (Some of the pages the links point to have not yet been created.)

  Thanks for any help you can give.

  Best,
  Jennifer