Member Panel

Simple CSS Drop Down Menu Updated
October 20th, 2012 - 176 Comments »

 

I have updated the previous CSS drop down menu, this is now Cross Browser Compatible (Chrome, Safari, Firefox, IE7+). This drop down is a lot better then before and easier to integrate into existing websites.

First off, the CSS

Place the following CSS in between your < head > < / head > tags.

and secondly, the HTML

Place the following HTML in between your < body > < / body > tags.

…and there you have it, a cross browser compatible and very customizable CSS Dropdown Menu. You can also add as many tiers as you like! This example has 3 tiers.

Again, as usual if any of you have any problems with this, do please let me know and I can work to help you resolve them.

 

Want to register your place on the all new membership system coming to handyHTML? now you can by visiting the link below.

Register today for these great benefits

  • Upload your own code snippets and tutorials!
  • Share them with your contacts / followers!
  • Edit and test your code snippets and tutorials live online!
  • Earn credits for your contributions and buy advertising spots or premium downloads!
  • …plus much more!

So, what are you waiting for? Register today and we will keep you updated on the systems progress!

CLICK HERE TO REGISTER ON HANDYHTML

Related posts:

 

 

176 Responses

  1. seosrikanth says:

    This Code Was Not Working in Mozilla Firefox 11. and it is working in Internet Explorer 9.

    This Code is Simply Easy to Use. I will follow the website. It is Clearly Understand able.

    Every One can use this Code. It is useful for all the Website Designers.

    Thank You.
    Seosrikantht

  2. Mud Monkey says:

    Fantastic work – a great menu!

    One small question – is there any way of having a smaller font in the dropdown lists compared to the main menu, as was the case in your earlier code?

    Cheers.

  3. Mud Monkey says:

    Another quick question: I’m not too familiar with CSS so the answer to this might be staring me in the face, but I wish to centre the menu in the browser window. I’ve tried using various html methods and have tried tweaking the css but with no joy so far…
    Any suggestions?

  4. Linda says:

    Thank You your the first I have managed to get to work after buying and trying for two whole days… One Question… If you could be a bit more specific where these scripts go.. it would be a help… eg:- The if any… The … and The … and it did not work for me until I added The to the css top script… and bottom

    Best Regards

    Linda

  5. Meredith says:

    Hi George :)
    Thank you for this tutorial. CSS is difficult for me, but yours has been the most clear so far. :)

    I am having problems though. I have a very big menu I am working on. The products tab drops down to 4 states, and then categories, and then vendor pages.

    I like how you showed that you can take a list in html, something I am familiar with doing, and then the CSS applies to it. I made the list and it looked right before I applied the CSS.

    Anyway, I have left out this part of the code:
    class=”dir”

    because I don’t know where to put it. I don’t see it in the CSS, and can’t figure out why it is where it is in the code, and where I should put it in mine.

    As is, the top buttons work okay, except the Products does not drop down and they are different fonts/sizes for some reason.

    To make things more complicated – sorry :( – I am using sitespinner pro- a wysiwyg program. I haven’t had problems inserting code before this. It allows you to insert code into the header, css, and body. If I put it in the header, I have two sections. If I put it in the CSS, I leave out the part and it puts it in the that it generates.

    Here is the page:
    http://www.compray.com/page153.html

    I put your code below it to help me figure it out. Your drop down works and mine doesn’t- I believe it is because of the class=”dir” thing.

    In a perfect world, I’d like it to work and be Arial font size 18, 16, on the drop down. From there I can make it the colors I need to.

    Would you be willing to help me on this? I would really appreciate it! :D This is my second day of trying to figure it out and I am about ready to go nuts. lol

    Thank you George!

    Mere

    • Hi Meredith!

      I will happily help you out with this, I shall take a look at your page later and get back to you no problem.

      As for class=”dir” that is not needed for this its there just in case you want to style it further.

      I shall get back to you when I am at my computer.

      Thanks,

      George

      • Meredith says:

        Thank you George- that is so sweet of you to help me out! :D I am looking forward to hearing what you have to say.

        I hope you had a great weekend! :)

        Mere

      • Meredith says:

        George! :D
        I figured it out! I went to build it again and found my mistake! I was closing it out by putting after everything, when I needed to leave it open so it would show what’s underneath! YAY!!! :D

        Now I just need help with the font size- It makes “Products” small, the one under that, and then it goes big again.

        Any thoughts?

        Thank you for a great drop down menu! :D

        Mere

    • Adam says:

      Hi there, thanks very much for this post. I have tried the above codes but so far had no luck in getting work with IE7+ or Firefox. I would very much appreciate if you give me a hand with this.

      Adam

  6. John says:

    Hi

    I am trying to replace my drop down javascript menu, with something I understand and is cross browser
    http://www.carrotmuseum.co.uk – the one under the top image.

    Can you adjust the code of yours so that it is centred and a specific width, say 800pix?

  7. Derek says:

    If your having problems with the hover on the li, there is an error in the code itself.
    ul.drop li.hover, ul.drop li:hover { position: relative; z-index: 599; cursor: default; background: #1e7c9a; }

    where the li.hover is it should be li:hover.

    • Meredith says:

      Thank you for your help! :D
      I made the correction, but it still didn’t work.

      What is weird is that I put his menu right under mine and his works. I must have code wrong somewhere in the list?

      And then there is the matter of the font being different.

      CSS is not my friend lately. :(

      Thank you anyway! :D
      Mere

  8. Daniel says:

    Hi, you are sending people to the wrong page, on the old version of the code the link to the updated version send users to a 404 error page (http://www.handy-html.com/simple-css-drop-menu-updated/). The error on the link is on the “dropdown” word. I think there is a few occurrences of that link.

  9. James says:

    This was simple and worked perfectly… unlike other code hanging around out there. Thanks!

  10. Bert Coules says:

    Many thanks for this. I didn’t need anything quite as multi-layered but it was so customisable that I had little trouble in simplifying things.

    One question, if I may: in line 7 of the css what’s the function of “zoom: 1″? Removing it doesn’t seem to have any effect (though admittedly I’ve only checked in Firefox so far) but I don’t want to edit out something that might be vital.

    Thanks again.

    • Dan says:

      zoom:1 is an IE-specific (I think) command that basically tells the page to scale to 1:1 ratio. In other words, it tells the page to appear at regular size. This may not seem at all useful or related, but it has an interesting side-effect of causing elements to line up how they should. Don’t ask me how it works as I haven’t the slightest idea, I just know it is necessary for a large number of IE-related layouts to position themselves properly.

  11. Hi George, and thanks so much for writing this! All the other CSS drop-down menus I tried suffered some problem or another, and I thought this was the perfect, lightweight solution, until I discovered that the menus don’t drop in IE8 with a transitional HTML dtd. They drop only if the dtd is XHTML, like on your sample page. Are you able to tweak the code to get it to work on IE8 with a transitional HTML dtd? I’m willing to pay for a solution. Thanks!

  12. pwal818 says:

    Thanks
    Really it was so simple that what i was thinking that i have make menu myself as most of the people download the customize menu form net but your simple code let me build myself..

    Thanks again

  13. BillyBoy says:

    Worked like a charm, thanks for sharing it.

  14. Earl says:

    George – Greetings. Thanks so much for the tute. One question what controls the font size of ALL the menu items? I note that the CSS font seems to only apply to those that DONT have a drop down (Home and Gallery) and that those with dropdowns are slightly smaller. I confirmed this by changing the font size and only those two increased/decreased. Is this just a peculiarity of dear ol’ CSS?
    Thanks again

  15. Bert Coules says:

    Thanks again for this. After playing about with it a little, I’d be grateful for one bit of advice.

    I find with drop-down menus that it can be easy to overshoot the lowest link if you run the cursor too rapidly down the list – which of course makes the menu disappear. Which is annoying.

    To help this not happen, I thought of adding a bit of space below the lowest menu item. I didn’t want to do it with padding because that affects the spacing elsewhere, but I discovered that adding an empty string to the bottom of the list…

    Final item

    … generates blank line. It’s just what I wanted – except that like all the other menu entries, it changes colour when hovered over.

    Is there a way to stop that happening? I tried using a class…

    Final item

    .nocolourchange a:hover{
    background: #000000; (My menu backgrounds are set to black)
    }

    …but that has no effect.

    Any pointers in the right direction would be great.

  16. Bert Coules says:

    Idiot. The coding in my previous post didn’t reproduce as coding. Sorry about that. I’m not sure how to get around it. Perhaps this will work…

    To help this not happen, I thought of adding a bit of space below the lowest menu item. I didn’t want to do it with padding because that affects the spacing elsewhere, but I discovered that adding an empty string to the bottom of the list…

    <!–

    Final item

    –>

    … generates a blank line. It’s just what I wanted – except that like all the other menu entries, it changes colour when hovered over.

    Is there a way to stop that happening? I tried using a class:

    <!–

    Final item

    –>

    And in the css:

    /*

    .nocolourchange a:hover{
    background: #000000; (My menu backgrounds are set to black)
    }

    */

    …but that has no effect.

    Any pointers in the right direction would be great.

    If this hasn’t worked, I apologise in advance.

  17. Roger says:

    I have setup the drop down menu, works find on a web page. The problem I have is I am using 2 frames horizontal. The menu being in the top, the drop down boxes are cut off by the bottom frame. Any idea how to make the top frame overlap the bottom or any other way of doing this?

  18. Sunil Patel says:

    I think this is best colored simple dropdown css menu…
    color combination is very simple and clean

    thanks for this.

  19. Arte says:

    Really handy and useful code for presenting a horizontal nav menu easily. The only code I found online that works properly! Thank you so much for sharing this code in such detail. Some of the other code I have seen causes the menu to go behind some of the elements on the page. Other times the code didn’t work properly on all browsers or the menu was really difficult from users point of view.

  20. milty says:

    Mr Orsmond,
    thank you for supporting learning folks everywhere.
    we are remodeling our site and drop down menus are in
    the plans. Your code is wonderful thank you.
    css is not my strong point, we would like to have
    a drop down list that triggers from hovering over
    a png image. is this possible? would like to make the box
    a wee bit wider as well. tried to cypher it out of the css
    but no luck. thanks

    m

  21. Karen says:

    I love this script and works well but I am a bit of a novice. I have made it so I have all the drop downs correct. But am having a few problems:
    1: figuring how the ref works to show the path it follows to open the page?
    2: I am working in a restrictive area and do not seem to be able to change the box dimensions so am only able to move mouse over first 2 lines? Any advise on these 2 issues?
    3: Is this a membership site? If so, when will the application work for people to join… I am impressed with this site and def. interested in being a member?
    Thanks

  22. dear Mr.George Orsmond,

    Really a great work, i appreciate this. i am searching for a drop down menu for my website, and you given me the solution, earlier i got an website which given me menu without css, but it has a difficulty that it won’t work properly when going for third stage as in your case, it will be, about us, staff, george. but your work is great, i have a little problem which i am facing now with my website, the menu working but how should take the menu to up or down, because after putting in template, edit html, first time it gone down, then some how i managed for this to go up now the boxes of the menu items are not of same size, can you suggest me the problem and solution for it.

  23. Dear sir, i am happy with your menu it is ready made just to change some letters. i done that but in one of my blog it works fine, (http://blogs-in-blog.blogspot.com) but when i place the same code to another blog it not showing the downline and more over i am using mangal font because i write in Hindi and Marathi, and Sanskruit also, so please help me with my menus, the other blog is (http://health-blogs-in-blog.blogspot.in/), is there is problem of the placement (is it only to be top of the blog), if so then i have to remove this), please suggest me something for my blogs. permanent solution.

  24. Beetle says:

    I can’t get this script as is to work in IE 8. What am I doing wrong.

    Thanks in advance.

  25. Beetle says:

    I found the answer to my question. The page needs to have the URL of w3.org included in the DOCTYPE comment. It works now. :)

  26. cher says:

    Hi thanks for this, but I’m having a problem with hover effects. My list goes like this:

    Item1 -> link
    Item2
    • Sub item1 -> link
    • Sub item2 -> link
    Item 3 -> link
    Item 4 -> link
    Item 5
    • Sub item3 -> link
    • Sub item4 -> link

    I want the font color to change when hovered, I managed to make it work on all except for Item 3 which retains the font color of it’s “unhovered” state. I think it has something to do with the open li tag of Item 2. I got around with this problem by adding an empty li tag before Item 3 and hide it using display:none, but I don’t feel like it’s the right fix for it. Help pls? :)

  27. Cheese says:

    Hello and thanks for this code, im quite a beginner in css and this helped me alot!

    One question: If I would like to turn this menu to a sidebar, make it a vertical menu instead of horisontal; what are the key things to change in your code?

  28. grant says:

    awesome code, and easy.

    i tried editing some of the code, and some of the elements changed and now for some reason i can’t change them back to the way they were originally even though i deleted all of the code and re did everything from scratch! how is it that the code is the exact same but it is acting differently now?

    for example, the lists in the drop down menu were centered at first and now they are not, even though it is the exact same code! also the font for the main titles are not verdana while the lists in the drop down menus are. they were verdana at first, and i never edited the font element, and now they are not verdana.

    i feel like i am in the twilight zone. how can literally the EXACT same code produce different results!?!?!?

  29. grant says:

    great code, and easy. one question, how do i make it span the entire width, of say a table at 800 px wide?

  30. Digby Green says:

    Hi there

    I found your drop down menu code and am planning to put it into my website which does not have drop downs at present.

    I am entering your code, but I am not sure where I add the .htm pages eg webdesign.htm or products.htm that each drop down links to.

    Can you give a quick example please?

  31. chris says:

    Hi, i have used this menu and it is working great.

    one question is there an easy was to make the color of the selected menu item stay a different color?

    i.e. if home page is selected the backround color remains red?

  32. sijin says:

    it’s very useful,thanks

  33. Hozey says:

    Thanks for a great easy to understand code. Just one question – the css file show Verdana as the only font used. But, the downloaded html file is using Times or something similar on everything in the top tier except Home and Gallery. All the sub and sub-sub menus are in Verdana.

    How do you make the font consistent throughout the menu?

    Please disregard earlier post regarding not being able to download the files. The link in the subscribe eMails got me there.

    Thank you,
    Hozey

  34. Hozey says:

    One more question please. I’m trying to incorporate your menu into an iWeb site. Using the procedure for menus that I’ve used in the past isn’t working. The html code goes in a snippet which is then referenced to a css file on the top level of the site. I’m just getting a tabbed list of the menu. It looks fine before I upload it to the server. Hopefully there is a solution to this problem.

    Thanks in advance,
    Hozey

  35. thlunski says:

    Hello. Any chance you can tell me why the drop down is so wide and will not disappear?

    Thanks!

  36. Clio says:

    Is there a way to make this going vertical rather than horizontal?

  37. Hozey says:

    OK, everything is working except I’d like to be able to make the sub-menu font size smaller than the top tier as could be done in the original code. Is that possible in the new code?

    • Heinz says:

      yes, just add the “font-size” attriute to each
      ul.drop a and ul.drop, ul.drop li, ul.drop ul

      First one is for the “a href” tag in the menue, the second one is for the list items whithout the a href.

      I think this was coded that way to change the look of links while leaving the other items as they are.

      You can also change the font itselfe by adding the “font-family” tag to each (or one) of the above classes.

      I also add some margin between the menua tabs, I used a special ID for the li element to set the margin because otherwise the margin for the drop menue would also increase which I want to avoid.

      Here’s what I did:
      li#main {
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
      margin-right: 20px;
      }

      And then put “id=main” in each openin li tag which you want to have those settings, in this case I also added roundet corners which (unfortunately) do not realy work on IE8, you have to work around with pie HTC, then it would work :)

  38. john says:

    How do I make the menu appear on every page, automatically.

    Can you do this via a CSS file, if so how?

    • Liliana says:

      just add between the in every single page:

      in this way you just have to make modification on YOURCSSFILE.css and all the pages will be updated!

      • Liliana says:

        sorry it didn’t reproduce as coding!
        <!–just add between the in every single page:

        in this way you just have to make modification on YOURCSSFILE.css and all the pages will be updated!–>

    • Heinz says:

      Not sure what you mean, the menue would “appear” on each site you add the HTML for the Menue. If the style is missing you have 2 options
      1.) Add the CSS code to each site you’ll use the menue
      2.) Put the CSS in a external CSS (like manue.css) link to the external file using

      I’ll always recomend option #2 because you only have to chang ONE file instead of browsing through each html file to change CSS items.

  39. Liliana says:

    Just to say THANK YOU so much for this post… I’m not an expert on css, but I could make the changes, the only one that is still not working is try to center the menu :( any help? Thanks!!!

  40. Chris says:

    I copied this code exactly but the pulldowns are not working. I can’t figure out why. Your demo works. Please help.

  41. Paldo says:

    Hi George

    all my internet sites use spy drop down menu. Unfortunately spry doesn’t work on ipad and iphone. If I understood correctly iOS doesn’t support javascript. jQuery is the solution but as I’m new to jQuery, I want to try with CSS which I understand. The problem is that hover doesn’t work on ipad, it should be replace by onclick. The best would be that the page recognize if it is a ipad or PC/MAC and I think there are solutions to that and keep hover for PC and onclick for ipad/iphone. I’ve tried to change hover to onclick on your CSS script but it doesn’t work.
    Can you please help me out?

    Thank you so much

  42. chess says:

    Hi!
    I changed the code so it apears verticaly, but when the cursor opens subcategory main links disapear. Can you tell me how can I fix this?

    • Carl says:

      I would like to know how you got it to go vertical. Did you solve the problem of the main links disappearing?

  43. Ashwin says:

    Thanks for your nice and simple code.

  44. Alex says:

    Hi, at last a drop down menu that is simple enough to look stylish and to work on. I had this problem on another website. I would like to center the dropdown in the middle of the page? Is there a simple way to do this or not. Kind regards Alex.

  45. Dapiaoen says:

    Unfortunately I can’t publish to the real world. First, let me say that I’ve reviewed the code many time and can’t find a typo. Does not mean there isn’t one.
    The symptom is that the dropdowns have two columns with the left being about about 30px with nothing in it. The right column has the data.

    In FireFox, the left column is colored and I can change it to red in the css (otherwise it is the default menu color):
    ul.drop ul { visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 195px; background: red; border: 1px dashed red; }

    In IE (7 is what we have, ugh), the border is invisible giving the appearance of the dropdown offset by about 30px.

    Any ideas? Thanks.

  46. Hozey says:

    The only way I can get this to work using only one font is to use the old css in conjunction with the new css. Please clarify.

    • Paldo says:

      Thank you Hozey for your help. I have installed a new dropdown menu that works fine on ipad.
      Best regards
      Paldo

      • Hozey says:

        You’re welcome, Paldo.

        After some trial and error and a comment from Heinz (yes, just add the “font-size” attriute to each
        ul.drop a and ul.drop, ul.drop li, ul.drop ul) I was able to eliminate the old code. I added, display:block; color: #fff; font-family: Verdana; font-size: 14px; text-decoration: none; after each ul.drop item, yes all eight as is in ul.drop a. You can then adjust the font family and font size to your liking.

        A couple of people have asked about centering. Work with the margin on line line of the code. In the example it’s set at 0 0 0 200px. Determine the width of your menu, subtract that amount from the total width of your page and divide by two. Replace 200px with the answer you get.

        In regard to how to get it on each page; Put the html code in a snippet or a widget with the href being derived from one single css file. See the page source at http://www.lawsart.com. Each page references widget1 which feeds off a single css file for every page. This makes for less coding and faster page loading.

        You’ll notice at http://www.lawsart.com there is a menu at the bottom of the Horses, Dogs, and People pages that drops up. To accomplish this I added
        body {
        padding-top: 200px;

        The padding will be determined by the height of your particular menu.

        If you have any questions, let me know at gandlwebdesign@gmail.com.

        Hope this helps someone

  47. TaLou says:

    I like this menu, but how do you make it centered, and how can I make the drop down a bit transparent?

    • Heinz says:

      The best way to do this in a valid way and without compatibility issues (except IE 6 and lower…) is to set the Beackground of each drop box to a transparent png image instead of the backgroundcolor. All browsers can (except ie6 and lower) can handle this and the code is stil valid so try this, it should work fine for you.

  48. Heinz says:

    Hi,
    great and simple Script, I did some changes to switch background and text color while hovering, also added some margin between the tabs in the top row and used rounded corners to soften it.

    If anyone could need it I’ll post it, just ask.

    However, very nice Work :)

  49. john says:

    How do I place the menu on every page of a multi page website, without having to code up every page?

    New to CSS – is that the wya?

  50. Jim M says:

    Hi George,
    First, thank you for an excellent menu.
    I installed it in my Expression Web Master Page so it works with all my content pages. Since I already had a sidebar I installed it in the master page above the content page but would like to widen it so it fits across the width of my content page. I tried adding spaces to the main menu items but that doesn’t work. I also tried making css changes to ul#nav but can’t get it to widen.
    I got it to center by changing
    ul#nav {margin: 0 0 0 440px;} rather than 200px;
    When I wrap it in a div it spaces down which I don’t want but I think I could fix the div to move it back up if div is necessary.

    Thanks for answering so many people and for sharing your work.

    Jim

  51. Jim M says:

    I got it working fairly well with the following css changes.

    ul#nav {margin: 0 0 0 314px;}
    ul li {
    width:92px;
    }
    I also had to change the width of the dropdown to 95 from 195 becasue it added an empty box to the right.

    I have a normal 15 px space between my sidebar and content page so I have the same space on the left of the menu. I think it will look ok when I add some content to the content pages.
    Of course if I add or delete a main menu I’ll have to make adjustments.
    Now I just need to change colors which should not be too difficult.
    Hope this help someone.
    Jim

  52. Natalie says:

    I would like to have the word that I hover over to make the drop down work to be a link as well. I have set it to link to a page but it doesn’t work. Can this do both? See below, I would like the word benefits to go to benefits.html?

    Thanks

    Nat

    benefits

    Solutions
    Supports

    • Heinz says:

      Not sure if I got it right, you have some / one tap in your manu which has a submenu but should also be a link to a landingpage? In this case just set the “title” between the li tags inside a “a” tag, for example:
      Benefits

      Benefits 1

  53. Peter says:

    Great work, George. Nice and simple. Thanks.

    Am using Dreamweaver CS3 on a Mac. The previous code worked fine. This new one seems to have a glitch or two.

    Link to the issues discussed below:
    http://www.perubluesky.ca/tone.html

    In the menu bar, where a block element has a drop down list (eg About Us), the font defaults to a serif font, whereas the blocks WITHOUT a drop down element have the prescribed Verdana font. This shows up in the browser as well (I have the latest versions).

    In the Dreamweaver Design Window, the menu elements don’t line up as they did with the previous menu version. The block drops down below the others. It looks fine when opened in the browser, however. I can’t see where to adjust the width of the overall bar so the last block on the right doesn’t drop down in the Dreamweaver Design window.

    Also, why is used instead of as in the previous version?

    It might help to have /* comments */ in each of your style lines to guide semi-skilled part-time web designers like myself fiddle with the code. :-)

    Thanks!

  54. Heinz says:

    Just another hint:
    To make this (dropdowns) work on touchscreens like smartphones (which usualy do not support any hover effects…), just use a simple trick – ad an empty “a” Tag (just like href=”#” for example) to the item which opens the dropdown. Adding this makes the menu tab/item clickable and so you can interact with it on a touchscreen and the dropdown will show up.

    Have fun :-)

  55. Rich D. says:

    Just wanted to say THANK YOU! This menu is just what I’ve been looking for. Clean, simple code and a great-looking customizable menu. Thanks again!!

  56. Digby Green says:

    yes Peter
    Your suggestion of comments on each line is great one.
    It would really have helped me get the drop downs going.

  57. Paul says:

    my menu goes ‘behind’ my fadeSlideShow. see following link:

    http://www.pgcpartnergroup.com/new.php

    Any thoughts on how to make it go in front?

    • Mark M says:

      Use the CSS property called Z-index.

      First make sure the slideshow container has a css position (e.g., position:relative, or position:fixed, or position:absolute). Then apply a CSS z-index value that is lower than that of your menu container.

      More here: http://www.w3schools.com/cssref/pr_pos_z-index.asp

      You may need to play with this for a while. Sometimes the easiest thing to do is add a high z-index value to your menu container, such as:

      Hope that provides a solution for you.

  58. argel says:

    how can i change the size of the menu? it is too small to fit in the screen. thank you

  59. mari says:

    The menu works beautifully in firefox ( and is so easy to manage the formatting off), but I can’t get it to work in internet explorer.
    I admit I’m a complete novice in programming – but would really appreciate some help.

  60. Christine says:

    Hi, there!

    Thank you for a wonderful navigation!

    I have four links I need to add 445 space right in the middle. I added this center image with no ahref tag, but it still changes color upon hover. How can I create attributes to make that item no change color? I don’t know how to write “raw” css code.

    Thank you,
    Christine

    • Heinz says:

      Do you want the space just between the two left and the other two right menue items or between each of the items?

      In the first case, you can ad a specific margin left or right to one of the items which should have the Space between, to do so, use a specific ID for the element so you can change the margin for only this element. You can also use inline style, I think.

      In the other Case, just ad the Margin for the element you want to have more space.

      I can check which elements you need to edit but I’m not at my Desktop at the Moment.

      Get Firefox with firebug extention to play with CSS Settings before changing the code, this helps a lot if there’s no documentation for the code :-)

      Lg

  61. Jim M says:

    The menu works well for me. But I’m wondering if there would be a way to use a sitemap with the menu?

    It would meake it much easier to keep organized and keep the MasterPage clean.

    Thanks,

    Jim

  62. Ndnet says:

    Hi, thanks for your free wonderful code. The menu is working well in ie only. I have followed the code again and again and its not working in mobile. An not good at css. Pls help me!

  63. Emmanuel says:

    Hi, this worked perfectly for me, thanks. However, I want to use image as background, as a single image to either cover the entire page or just be at the center. please how do i do that?
    Thank you.

  64. Alfhild says:

    Love it!

    Question: In the menu, I like having the page I’m on (Home, About, etc.), show a different background color on the menu item than the other menu items, to make it clear which page the user is currently on.

    What would I need to to, to get your code to do that?

    • Ineke says:

      Hi, I added at the bottom of the dropdown menu:

      ul.drop li.active { visibility: visible; background: #cc0033; color: #fff; }

      where you can use any color code with the background.

      With me, it works perfectly. Hope this is what you were looking for.

      kind regards
      Ineke

  65. Scott says:

    great compact code! replaced the text with images that have rollover states very easily. works in all browsers except explorer – any ideas why? would love to use this on my website thanks

  66. the_vam says:

    if somebody is interested in an animated version:

    ul#nav {margin:0 auto;font-family: Verdana;font-size: 14px;z-index:99;}
    ul.drop a { display:block; color: black; text-decoration: none;}
    ul.drop, ul.drop li, ul.drop ul { list-style: none; margin: 0; padding: 0; color: black}
    ul.drop { position: relative; z-index: 597; float: left; }
    ul.drop li { float: left; line-height: 1.3em; vertical-align: middle; zoom: 1; padding: 5px 10px; }
    ul.drop li.hover, ul.drop li:hover { position: relative; z-index: 599; cursor: default; background:lightgrey }
    ul.drop ul { visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 195px; background: #555; max-height:0px;overflow:hidden;-webkit-transition:max-height 0.4s linear; -moz-transition:max-height 0.4s linear; transition:max-height 0.4s linear; }
    ul.drop ul li { float: none; }
    ul.drop ul ul { top: -2px; left: 100%; }
    ul.drop li:hover > ul { visibility: visible;max-height:200px;}

  67. Alexandra says:

    The class for the top level items should not be the same as the drop down items. Separate additional classes should be created to allow more customization of the items bellow the main one.

  68. Hi George!

    I want to integrate the sub-menus into a wordpress theme that has only Top-menu with no sub-menus.

    the page is http://www.scproconfort.ro

    How can i use it?
    Thanks!

  69. gamezat says:

    thank you, it’s very nice menu and easy to use
    thanks

  70. Rabbi says:

    Thank you very much for the codes. But I as wondering how to move the drop down menu to another place in my page. I am using Macromedia Dreamweaver 8 to design my page.Can you please help? Thank you :)

  71. Kajen says:

    Hi friend

    Thank u so much it’s a great help

    I need a help from u I need this dropdown menu to be 680px width how can I change it
    Please advise me ASAP
    Thank u so much

  72. Md. Anisur Rahman says:

    Thank you very much for your post. It is really helpful for menu system. I have found one problem is that Its not working IE8. But it is working very well on Google Chrome and FireFox borwsers.

    I will be grateful If you solve this problem.

    Thanking you
    Md. Anisur Rahman

  73. Shahid says:

    Excellent work George…

  74. To get this to work in IE, make sure your doctype is xHTML 1.0 Transitional, use this code… < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    Thanks,

    George

    • Gerald says:

      George,

      Very nice code!
      I’m having problems with the dropdown content appearing in IE10. Does your IE fix apply to IE10? If so, exactly where does the code you’ve provided go?

      This seems to work well with the Chrome & Firefox browsers.

  75. Tom says:

    Brilliant! Just brilliant! Every time someone asks me “Can we put these in a drop down menu?” I sigh at the thought, as they’re bloody awkward.

    Not with this though. Stripped down, it’s exactly what I need.

    If you’re ever in Lancaster, I’ll happily buy you a pint.

  76. Jan says:

    This is a little jquery javascript snippet to get the menu to work in IE6. (….yes ….yes, I know! but I have no option I have to support IE6).
    It’s inside a conditional so it only loads if it is IE6

    jQuery(‘ul.drop li’).hover(function() {
    jQuery(this).css(‘position’,'relative’).css(‘z-index’,599).css(‘cursor’,'default’).css(‘background’,'#1e7c9a’);
    jQuery(this).find(‘ul:first’).css(‘visibility’,'visible’);
    }, function() {
    jQuery(this).css(‘background’,'#555′);
    jQuery(this).find(‘ul:first’).css(‘visibility’,'hidden’);
    });

  77. Tim says:

    Thanks alot! I got it working for my site in no-time!! You did a great job making a clean, simple, understandable code for everyone out there :)

  78. hasmukh says:

    i have no knowledge html and css, but tried above code with my site, but drop down list hides behind image, plz. guide me. thanks

  79. SVK says:

    tried the above code
    but not getting he dropdowns

  80. Jaime says:

    Any thoughts on how to make this compatible with an iPhone /smartphone?

  81. james says:

    Why is the left margin 200px? Also, is this compatible with a tablet/iPad? I’m getting very different results on my table. Thanks!

  82. Md. Anisur Rahman says:

    Thanks to Mr. George, I have used your suggested code like below but still its not working in IE browser. Please guide me.

    Thanks,
    Anis

    To get this to work in IE, make sure your doctype is xHTML 1.0 Transitional, use this code… ““

    Thanks,

    George

  83. Jennifer says:

    Hi George,

    I really want to put this very simple drop down box on my site. However, I’m very nervous as I’m not sure where to put the code at on my site. As you can see, I have my navigation in my custom_announcement.html box (and I really like it there to be honest, I just want to add to it a drop down). So would I just paste the html portion into that box of my template and then the CSS where would that go? In my header of the CSS of the theme?

    Any help getting this accomplished would be awesome!
    Thank you for your time,
    Jennifer

    • Jennifer says:

      I just wanted to say that I finally got it up and working great at the top of my forum! My only issue now is that it pushes all of my banners to the right side of the screen (but only in IE) it seems to work perfectly in Firefox and on my smartphone. Any idea what would be causing this or how I could fix this??

      Thanks,
      Jennifer

  84. Ger says:

    Thanks for the code, very helpful.

    There is one thing I can’t do however.

    I am using a PHP include to call the menu into my page and I want to highlight the current page for each top level item for example “Home”.

    I am using the following code in my css
    body#home #homenav{background: red;}

    This displays ul.drop a but I want to display the ul.drop li:hover state.

    Is this possible or is there another way to do this?

    Thanks
    Ger

    • Ger says:

      A bit more thought and a very strong cup of coffee later, I’ve found the solution.

      I changed my html to give the list item a class

      HOME

      And in my CSS

      body#home li.homenav {
      background: maroon;}

      Hope this helps someone else out there.

      Ger

  85. Pulu says:

    Hey thanks! I had trouble with my previous menu css and I was looking for a simple css to accomodate to my website. I changed the code so that the menu is placed on the right side and the background & colorings. This seems to work at least in Safari, Chrome and IE. Many thanks for this!

  86. Ben Junior says:

    Thanks so much for your simple, clean and 100% functional drop-down menu.
    It was the best example I found searching the net.

  87. Timothy says:

    Hi George

    Thanks a lot for your great task and help. I am beginner to css so can you please explain this code how it works so it will help me to customize it. I want to understand the logic instead of just copy and paste so please teach me. you can send explanation to timothyganesh@gmail.com. I am looking forward your reply

    Thanks a lot.

  88. Kim says:

    Just want to say thank you so much! I started a new job this year where I will be building web pages (first time professionally), and this has helped me tremendously! Why re-invent the wheel – and drop downs can be tricky. Code is very clean and legible. Thanks again!

  89. Vishal Singh says:

    Thanx a lot for this dropdown code.
    This is very simple to understand.

  90. Tom Silvius says:

    A very clean example that works quite well. Thanks, I can take it from here.

    Also guy, you did a great amount of hand holding and did just a great job.

    Please post a lot of stuff!

    Tom

  91. Alex says:

    Thanks!
    Works good + understandable + alterable + editable.

  92. german_seb says:

    Hey,

    thanks for this awesome drop down.

    I am simply trying to figure out 2 things.

    – how to change the position of the menu ( the margins in the css don’t seem to react)

    – how to change the hover color for Home

    Many thanks again

  93. dans0925 says:

    How would you make the drop down 2 columns wide or more to display more choices. I need to create a drop down with many choices and having it all in one column is too long so I need 2 or more columns wide.
    Thanks,

  94. Gerald says:

    I noticed that the “LIVE PREVIEW” example posted above after the code works like a charm…even in the IE browsers.

    I have the code setup on my webpage, but my background colors nor any of the dropowns menus appear when viewing with IE9 or IE10.

    Can anyone tell me what I might be doing wrong or what the issue might be?

    FYI – workwell with Firefox and Chrome, but its also got to work with IE!

    Appreciate ANY help!

  95. Cygar says:

    The page is under construction.

    I have a problem. I am unable center the drop down menu.

    I have this in my menu.php file:

    Strona Główna
    Gry

    Silent Hill
    Silent Hill 2
    Silent Hill 3
    Silent Hill 4: The Room
    Silent Hilll: Origins
    Silent Hill: Homecoming
    Silent Hill: Shattered Memories
    Silent Hill: Downpour

    Forum

    —–

    And this in my CSS:

    /*—- CROSS BROWSER DROPDOWN MENU —-*/
    ul#dropboxmenu {margin: 0 0 0 200px;}
    ul.drop a { display:block; color: #fff; font-family: Verdana; font-size: 14px; text-decoration: none; text-align: center;}
    ul.drop, ul.drop li, ul.drop ul { list-style: none; margin: 0; padding: 0; border: 1px solid #fff; background: #555; color: #fff;}
    ul.drop { position: relative; z-index: 597; float: left; }
    ul.drop li { float: left; line-height: 1.3em; vertical-align: middle; zoom: 1; padding: 5px 10px; }
    ul.drop li.hover, ul.drop li:hover { position: relative; z-index: 599; cursor: default; background: #1e7c9a; }
    ul.drop ul { visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 195px; background: #555; border: 1px solid #fff; }
    ul.drop ul li { float: none; }
    ul.drop ul ul { top: -2px; left: 100%; }
    ul.drop li:hover > ul { visibility: visible }

    • Cygar says:

      ///Edit.
      The comments interpret the HTML lol.
      I replace tag and with [ ] and [ /]
      so they get processed.

      I use dynamic menu with a simple php include command.
      I have this in my menu.php file:

      [center]
      [ul id="dropboxmenu" class="drop"]
      [li][a href="index.php"]Strona Główna[/a][/li]
      [li]Gry
      [ul[
      [li][a href="Silent_Hill_1.php"]Silent Hill[/a][/li]
      [li][a href="Silent_Hill_2.php"]Silent Hill 2[/a][/li]
      [li][a href="Silent_Hill_3.php">Silent Hill 3[/a]
      [/li]
      [li][a href="Silent_Hill_4.php">Silent Hill 4: The Room[/a][/li]
      [li][a href="Silent_Hill_Origins.php">Silent Hilll: Origins[/a][/li]
      [li][a href="Silent_Hill_Homecoming.php">Silent Hill: Homecoming[/a][/li]
      [li][/a] href=”Silent_Hill_Shattered_Memories.php”>Silent Hill: Shattered Memories[/a]
      [li][a href="Silent_Hill_Downpour.php">Silent Hill: Downpour[/a][/li]
      [/ul]
      [/li]
      pli][a href="http://www.espritdesign.pl/psxzone/silenthill/forum/index.php" target="tab"][font color="yellow"]Forum[/font][/a][/li]

      [/ul]
      [/center]

  96. BayChaser says:

    This is 1 of the best menus around that is simple yet so perfect for all browsers. using it on my site and its perfect.. Thank you so much for this

  97. Chris says:

    I’m running IE 8 and the drop downs aren’t working for me.
    I’ve gone over the code and even tried the orignal and updated versions and both aren’t working for me.

    Please help…

  98. Damian says:

    I use the code as is for proofing. The styling comes first in the header section between while the html code is inserted in the body section.
    The menus comes up in IE8 but nothing happens when the mouse hovers over them. Pls assist.

  99. Damian says:

    I use the code as is for proofing. The styling comes first in the header section while the html code is inserted in the body section.
    The menus comes up in IE8 but nothing happens when the mouse hovers over them. Pls assist.

  100. Dave Lalande says:

    Hello,

    Thanks so much for the great and easy menus. I’m using them to go a legacy Intranet I inherited.

    My menus don’t go border to border with my 960px graphic and wrapper I use on the page. Is there a way to dynamically expand the width of the menus to fit 960px wide if the various top level menu items don’t require that much space?

    Here is a graphic of how they line up now. https://docs.google.com/file/d/0By_2YLvaQba0OWtKUXVwZW01MTg/edit?usp=sharing

    and here is the current CSS
    /*—- CROSS BROWSER DROPDOWN MENU —-*/
    ul#nav {margin: 0 0 0 0;}
    ul.drop a { display:block; color: #fff; font-family: Verdana; font-size: 14px; text-decoration: none;}
    ul.drop, ul.drop li, ul.drop ul { font-family: Verdana; font-size: 14px; list-style: none; margin: 0; padding: 0; border: 1px solid #fff; background: #B0CD2C; color: #fff;}
    ul.drop { position: relative; z-index: 597; float: left; }
    ul.drop li { float: left; line-height: 1.3em; vertical-align: middle; zoom: 1; padding: 7px 11px; }
    ul.drop li.hover, ul.drop li:hover { position: relative; z-index: 599; cursor: default; background: #20413A; }
    ul.drop ul { visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 195px; background: #555; border: 1px solid #fff; }
    ul.drop ul li { float: none; }
    ul.drop ul ul { top: -2px; left: 100%; }
    ul.drop li:hover > ul { visibility: visible }

    Thanks for any suggestions you can give.

  101. Ineke says:

    Hi, I am so happy with the CSS dropdown menu. It’s great! However, I can’t seem to get it working on iPad 2. It appears neatly, but the dropdown doesn’t work. Does anybody have a clue and/or a solution?
    Thanks for your reply.
    Kindest regards,
    Ineke

  102. Jacob Saunders says:

    Great menu! There is only one problem I’m having: How would I center the menu within a div that is set at a width of 100%?

  103. Matthew says:

    When I use larger phrases than the ones given to me how do i make it so the drop down menu stays on one line

  104. Bill says:

    Hi, George: many thank for all this generous work. You’ve helped a lot of folks.

    I want to do something more unusual: have a nested menu in a column on the RIGHT side of the page. The nests would need to go two levels, and because the men is on the right, the dropdowns need to go to the left of each item.

    Do you possibly have anything like that off-the-shelf? Or is it easy to modify the basic menu you’ve already shared?
    :)

    Very much appreciated — Bill

  105. christian says:

    you are awesome!

  106. Adam Sykes says:

    Hi,
    I am struggling to get this to work. I have copied the text in to the areas you mention, and yet I can not
    a) get the drop downs to work and,
    b) change all the main menu fields to what I require them to be
    Can you please help.
    Regards
    ADAM

  107. Brad Hull says:

    I’ve used your “Simple CSS Drop Down Menu Updated” for my menu, with the drop down only for one button, “schedule”. I have obviously massaged the code for my application. I use a Mac OS 10.6.8, and everything seems to work great in Safari, Sea Monkey, Chrome, Opera and Firefox. Does not work with IE 4 (mac) – the menu is vertical at the right side, and not well with my iPad – the drop down doesn’t show up from all pages, and doesn’t stay long enuf to click it!

    I also got feedback from a PC user (IE, I think), that only the top half of the menu bar shows up above an “embossed line” and the lower half below (I can probably fix that), but the Schedule button is not “hot”.

    Is there an obvious fix – perhaps I deleted too much of your code . . .

    Any help much appreciated,

    Thanks,
    Brad.

  108. Jennifer says:

    Hello, I just have a question. You seem to have a very good code, but I’m just not very far along in html yet. So I have my home page (renfrewunitedchurch.ca/home.html), then I have an events page (renfrewunitedchurch.ca/events.html) The events is also a subnavigation, if that’s important. I added the link into the codeEvents (is that even right?) Anyways, when I tested it out, the link took me to http://renfrewunitedchurch.ca/home.html#/events.html. Any answers? Thanks a million!

  109. Angela Robinson says:

    The code works great especially as I’m a newbie, however, I had a couple issues tweeking the original menu… How do I remove the Web Design, Graphic Design, CSS, HTML submenu and the last box ‘B’ (that I labeled). I just want it to go Usage with its year submenu, end, then next tab of Reference Lib. Any help would be greatly appreciative! Thank you.

    Report/ Stats

    EOS Reports
    Sold Case Detail

    2013
    2012
    2011
    2010
    2009
    2008
    2007
    2006
    2005

    Usage

    2013
    2012
    2011
    2010
    2009
    2008
    2007
    2006
    2005

    Web Design
    Graphic Design
    HTML
    CSS

    B

    Reference Lib

  110. Dan says:

    Hey George!

    Firstly, this is awesome. One of the most valuable resources I’ve seen on the internet regarding dropdown menus and made completly out of CSS. Well done!

    Just one question, how does it integrate with older browsers like IE6? I know they are severely out of date but there are a lot of people still using them. Many older browsers do not understand the parent/child commands such as
    ul.drop li:hover > ul { visibility: visible }
    and cannot understand the :hover command unless applied to a link (a:hover{}). Just wondered how backwards compatable it is… I would try it myself but I no longer have IE6 to test it on.

    Anyways, thanks for a fantastic resource! I’ll show you what I’ve made with it if I can get it working :)

    Dan Hicks

  111. Claire says:

    Hi, thank you for this code. This is a great looking little menu. Unfortunately it is not working properly for me. The dropdown menus are flashing up when I hover over the main menu item but do not allow me to click on them. Also the drop down menus are showing up behind other images so can’t be seen properly.
    Here is my code. I would really appreciate any help. Thanks.

    Home
    About Us

    History
    Publicity
    Testimonials
    The Area
    FAQs

    Seaweed Baths

    The Bathhouse
    Benefits
    Sustainability
    Book A Bath

    Treatments

    Facial
    Body
    Feet and Hands
    Packages
    Before and After

    Shop

    Bath
    Skincare
    Vouchers
    Edible Seaweeds
    Nautical Art

    Special Offers
    Contact us

    Contact Information
    Opening Times
    Find Us

  112. Greg says:

    George, thanks for publishing this. Unfortunately it doesn’t work in IE10. It does work beautifully in Chrome whether the CSS is saved in the CSS or the HTML file. But IE doesn’t work either way. Apart from a few cosmetic tweaks I didn’t change the code in any substantive way. Do you know what’s missing for IE, because we’d love to get our whole site updated with this nice menu.

  113. Exactly what I have been looking for – but ….
    how do you modify it to pop UP instead of Down?

  114. adam says:

    Love this drop down menu, thanks. Have put it all over my site. Just got an iPad and realised I had to change all the code! But thankfully the answer was above, ie a onClick=”return true”;.
    However, one question if someone please has the answer as I have been struggling with this: nowrap! My menu is wrapping in IE and in Firefox but not in Chrome or Safari. I have tried so many things, ie different doctypes, different css for nowrap, going mad here! Please, someone help!
    Thanks,

  115. Claire says:

    Hi, great menu but please help. Drop down menus just flash up for a second and do not allow you to click on them. Also the menus are hiding behind any other content on the site. My css code is:

    ul#dropboxmenu
    {
    margin: 0 0 0 200px;
    }

    ul.drop a
    {
    display: block;
    color: #fff;
    font-family: Verdana;
    font-size: 14px;
    text-decoration: none;
    }

    ul.drop
    {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid #fff;
    background: #555;
    color: #fff;
    }

    ul.drop li
    {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid #fff;
    background: #555;
    color: #fff;
    }

    ul.drop ul
    {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid #fff;
    background: #555;
    color: #fff;
    }

    ul.drop
    {
    position: relative;
    z-index: 10000;
    float: left;
    }

    ul.drop li
    {
    float: left;
    line-height: 1.3em;
    vertical-align: middle;
    zoom: 1;
    padding: 5px 10px;
    }

    ul.drop li.hover
    {
    position: relative;
    z-index: 10000;
    cursor: default;
    background: #919d43;
    }

    ul.drop li:hover
    {
    position: relative;
    z-index: 10000;
    cursor: default;
    background: #919d43;
    }

    ul.drop ul
    {
    visibility: hidden;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10000;
    width: 195px;
    background: #555;
    border: 1px solid #fff;
    }

    ul.drop ul li
    {
    float: none;
    }

    ul.drop ul ul
    {
    top: -2px;
    left: 100%;
    }

    ul.drop li:hover > ul
    {
    visibility: visible;
    }

    And the HTML
    {

    Home
    About Us

    Our Story
    Publicity
    The Area

    Seaweed Baths

    The Bathhouse
    Benefits
    Sustainability
    Book A Bath
    Testimonials
    FAQs

    Treatments

    Facial
    Body
    Feet and Hands
    Packages
    Before and After

    Shop

    Bath
    Skincare
    Vouchers
    Edible Seaweeds
    Nautical Art

    Special Offers
    Contact us

    Contact Information
    Opening Times
    Find Us

    }

    • Claire says:

      Oh sorry the html isn’t showing up. I have had a bit of a breakthrough since posting this query. My menu works perfectly until I insert another piece of data beneath it. It doesn’t matter if its an image, embedded file or a text block. (I’m using widgets.) It could well be to do with the z index although i have set this to 10000 on the nav menu. I’m not great with code. Could anybody advise on what code i need to use on the nav menu or the other widgets beneath it to fix this???

Leave a Reply