Member Panel
My Submissions (26) My Credits (38 cr) My Favourites (86) Edit my account Inbox (3)
HOME HTML CSS JQUERY WORDPRESS PHP MYSQL

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

Tags:
+ Add to Favourites

 

  • Sharebar

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.

You can see a LIVE PREVIEW here

Related posts:

 

156 Responses

  1. seosrikanth says:
    October 20, 2012 at 12:36 pm

    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

    Reply
  2. Mud Monkey says:
    October 20, 2012 at 12:46 pm

    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.

    Reply
  3. Mud Monkey says:
    October 22, 2012 at 11:23 am

    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?

    Reply
  4. Linda says:
    October 25, 2012 at 10:41 am

    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

    Reply
  5. Meredith says:
    October 27, 2012 at 1:02 am

    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

    Reply
    • George Orsmond says:
      October 27, 2012 at 5:53 am

      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

      Reply
      • Meredith says:
        October 29, 2012 at 10:07 pm

        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

        Reply
      • Meredith says:
        October 29, 2012 at 10:29 pm

        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

        Reply
    • Adam says:
      January 21, 2013 at 6:48 pm

      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

      Reply
  6. John says:
    October 28, 2012 at 5:56 pm

    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?

    Reply
  7. Derek says:
    October 29, 2012 at 7:41 pm

    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.

    Reply
    • Meredith says:
      October 29, 2012 at 10:02 pm

      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

      Reply
  8. Daniel says:
    November 5, 2012 at 10:23 pm

    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.

    Reply
  9. James says:
    November 13, 2012 at 4:39 am

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

    Reply
  10. Bert Coules says:
    November 15, 2012 at 10:58 pm

    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.

    Reply
  11. Michael Bluejay says:
    November 20, 2012 at 7:36 am

    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!

    Reply
  12. pwal818 says:
    November 21, 2012 at 9:07 pm

    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

    Reply
  13. BillyBoy says:
    November 22, 2012 at 10:18 am

    Worked like a charm, thanks for sharing it.

    Reply
  14. Earl says:
    November 22, 2012 at 10:29 pm

    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

    Reply
  15. Bert Coules says:
    November 24, 2012 at 12:11 am

    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.

    Reply
  16. Bert Coules says:
    November 24, 2012 at 12:16 am

    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.

    Reply
  17. Roger says:
    November 25, 2012 at 4:22 am

    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?

    Reply
  18. Sunil Patel says:
    November 26, 2012 at 3:49 am

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

    thanks for this.

    Reply
  19. Arte says:
    November 29, 2012 at 11:25 am

    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.

    Reply
  20. milty says:
    November 29, 2012 at 11:08 pm

    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

    Reply
  21. Karen says:
    November 30, 2012 at 4:11 pm

    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

    Reply
  22. udayan p k tuljapurkar says:
    December 2, 2012 at 6:38 am

    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.

    Reply
  23. udayan tuljapurkar says:
    December 3, 2012 at 11:51 am

    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.

    Reply
  24. Beetle says:
    December 6, 2012 at 11:27 am

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

    Thanks in advance.

    Reply
  25. Beetle says:
    December 6, 2012 at 9:15 pm

    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. :)

    Reply
  26. cher says:
    December 8, 2012 at 4:13 am

    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? :)

    Reply
  27. Cheese says:
    December 14, 2012 at 3:34 pm

    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?

    Reply
  28. grant says:
    December 17, 2012 at 10:35 pm

    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!?!?!?

    Reply
  29. grant says:
    December 17, 2012 at 11:01 pm

    looks like the list elements that have have different font values than the ones without

    Reply
  30. grant says:
    December 17, 2012 at 11:13 pm

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

    Reply
  31. Digby Green says:
    December 19, 2012 at 3:25 am

    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?

    Reply
  32. chris says:
    December 20, 2012 at 3:15 pm

    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?

    Reply
  33. sijin says:
    December 22, 2012 at 6:46 am

    it’s very useful,thanks

    Reply
  34. Hozey says:
    December 29, 2012 at 2:30 pm

    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

    Reply
  35. Hozey says:
    December 29, 2012 at 7:17 pm

    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

    Reply
  36. thlunski says:
    January 2, 2013 at 3:50 am

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

    Thanks!

    Reply
  37. Clio says:
    January 2, 2013 at 7:29 am

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

    Reply
  38. Hozey says:
    January 2, 2013 at 12:17 pm

    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?

    Reply
    • Heinz says:
      January 22, 2013 at 8:40 am

      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 :)

      Reply
  39. john says:
    January 3, 2013 at 10:15 pm

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

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

    Reply
    • Liliana says:
      January 7, 2013 at 7:28 am

      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!

      Reply
      • Liliana says:
        January 7, 2013 at 7:37 am

        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!–>

        Reply
    • Heinz says:
      January 22, 2013 at 8:54 am

      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.

      Reply
  40. Liliana says:
    January 7, 2013 at 7:33 am

    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!!!

    Reply
  41. Chris says:
    January 7, 2013 at 9:18 pm

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

    Reply
  42. Paldo says:
    January 7, 2013 at 9:35 pm

    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

    Reply
  43. chess says:
    January 7, 2013 at 9:43 pm

    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?

    Reply
  44. Ashwin says:
    January 11, 2013 at 10:13 am

    Thanks for your nice and simple code.

    Reply
  45. Alex says:
    January 12, 2013 at 9:33 am

    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.

    Reply
  46. Dapiaoen says:
    January 14, 2013 at 6:19 pm

    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.

    Reply
  47. Hozey says:
    January 18, 2013 at 1:33 pm

    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.

    Reply
    • Paldo says:
      January 18, 2013 at 1:53 pm

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

      Reply
      • Hozey says:
        January 22, 2013 at 6:43 pm

        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

        Reply
  48. TaLou says:
    January 19, 2013 at 4:17 pm

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

    Reply
    • Heinz says:
      January 30, 2013 at 9:28 am

      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.

      Reply
  49. Heinz says:
    January 21, 2013 at 11:07 pm

    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 :)

    Reply
  50. john says:
    January 24, 2013 at 7:58 am

    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?

    Reply
  51. Jim M says:
    January 26, 2013 at 11:42 pm

    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

    Reply
  52. Jim M says:
    January 27, 2013 at 1:38 am

    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

    Reply
  53. Natalie says:
    January 28, 2013 at 7:52 am

    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

    Reply
    • Heinz says:
      January 30, 2013 at 9:36 am

      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

      Reply
  54. Peter says:
    January 31, 2013 at 6:45 am

    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!

    Reply
  55. Heinz says:
    January 31, 2013 at 11:05 am

    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 :-)

    Reply
  56. Rich D. says:
    February 3, 2013 at 2:44 am

    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!!

    Reply
  57. Digby Green says:
    February 5, 2013 at 10:22 pm

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

    Reply
  58. Paul says:
    February 6, 2013 at 8:17 pm

    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?

    Reply
    • Mark M says:
      February 19, 2013 at 1:34 am

      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.

      Reply
  59. argel says:
    February 17, 2013 at 1:27 am

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

    Reply
  60. mari says:
    February 19, 2013 at 4:10 pm

    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.

    Reply
  61. Christine says:
    February 21, 2013 at 3:24 pm

    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

    Reply
    • Heinz says:
      February 23, 2013 at 1:36 pm

      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

      Reply
  62. Jim M says:
    February 23, 2013 at 11:36 pm

    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

    Reply
  63. Ndnet says:
    February 25, 2013 at 7:07 pm

    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!

    Reply
  64. Emmanuel says:
    February 25, 2013 at 8:35 pm

    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.

    Reply
  65. Alfhild says:
    March 4, 2013 at 12:55 am

    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?

    Reply
    • Ineke says:
      May 19, 2013 at 8:07 pm

      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

      Reply
  66. Scott says:
    March 7, 2013 at 9:41 pm

    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

    Reply
  67. the_vam says:
    March 8, 2013 at 4:03 pm

    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;}

    Reply
  68. Alexandra says:
    March 11, 2013 at 5:19 pm

    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.

    Reply
  69. dementu cu butelia says:
    March 11, 2013 at 9:38 pm

    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!

    Reply
  70. gamezat says:
    March 12, 2013 at 7:21 pm

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

    Reply
  71. Rabbi says:
    March 18, 2013 at 3:54 pm

    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 :)

    Reply
  72. Kajen says:
    March 20, 2013 at 6:14 pm

    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

    Reply
  73. Md. Anisur Rahman says:
    March 21, 2013 at 4:58 am

    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

    Reply
  74. Shahid says:
    March 21, 2013 at 6:51 am

    Excellent work George…

    Reply
  75. George Orsmond says:
    March 21, 2013 at 8:14 pm

    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

    Reply
    • Gerald says:
      May 7, 2013 at 10:18 pm

      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.

      Reply
  76. Tom says:
    March 25, 2013 at 12:27 pm

    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.

    Reply
  77. Jan says:
    March 27, 2013 at 9:12 pm

    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’);
    });

    Reply
  78. Tim says:
    March 28, 2013 at 7:38 pm

    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 :)

    Reply
  79. hasmukh says:
    April 1, 2013 at 9:09 am

    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

    Reply
  80. SVK says:
    April 1, 2013 at 9:26 am

    tried the above code
    but not getting he dropdowns

    Reply
  81. Jaime says:
    April 1, 2013 at 3:16 pm

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

    Reply
  82. james says:
    April 4, 2013 at 3:02 am

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

    Reply
  83. Md. Anisur Rahman says:
    April 4, 2013 at 9:22 pm

    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

    Reply
  84. Jennifer says:
    April 5, 2013 at 2:34 pm

    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

    Reply
    • Jennifer says:
      April 15, 2013 at 12:12 am

      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

      Reply
  85. Ger says:
    April 6, 2013 at 8:48 am

    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

    Reply
    • Ger says:
      April 6, 2013 at 10:07 am

      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

      Reply
  86. Pulu says:
    April 10, 2013 at 6:13 am

    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!

    Reply
  87. Ben Junior says:
    April 12, 2013 at 10:35 pm

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

    Reply
  88. Timothy says:
    April 13, 2013 at 6:33 am

    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.

    Reply
  89. Kim says:
    April 16, 2013 at 1:14 pm

    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!

    Reply
  90. Vishal Singh says:
    April 18, 2013 at 12:03 pm

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

    Reply
  91. Tom Silvius says:
    April 20, 2013 at 5:26 am

    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

    Reply
  92. Alex says:
    April 21, 2013 at 10:40 pm

    Thanks!
    Works good + understandable + alterable + editable.

    Reply
  93. german_seb says:
    April 28, 2013 at 9:38 am

    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

    Reply
  94. dans0925 says:
    May 3, 2013 at 2:12 pm

    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,

    Reply
  95. Gerald says:
    May 8, 2013 at 12:03 am

    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!

    Reply
  96. Cygar says:
    May 11, 2013 at 10:10 am

    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 }

    Reply
    • Cygar says:
      May 11, 2013 at 10:18 am

      ///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]

      Reply
  97. BayChaser says:
    May 11, 2013 at 5:52 pm

    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

    Reply
  98. Chris says:
    May 13, 2013 at 1:36 pm

    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…

    Reply
  99. Damian says:
    May 13, 2013 at 7:16 pm

    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.

    Reply
  100. Damian says:
    May 13, 2013 at 7:19 pm

    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.

    Reply
  101. Dave Lalande says:
    May 14, 2013 at 4:34 pm

    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.

    Reply
  102. Ineke says:
    May 19, 2013 at 8:01 pm

    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

    Reply
  103. Jacob Saunders says:
    May 19, 2013 at 10:43 pm

    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%?

    Reply

Leave a Reply

FOLLOW US ON TWITTER
LIKE OUR FACEBOOK PAGE
ADVERTISE
PSDCenter.com - We convert designs to html & css
CATEGORIES
Join our newsletter
Subscribe to handyHTML's monthly Newsletter and receive the latest information and tips in Web Development!



SOCIAL NETWORK
Join handyHTML's Social Network!

We shall keep you updated on all of the latest snippets, news and updates.
209 TWITTER FOLLOWERS
93 FACEBOOK FANS
15 RSS SUBSCRIBERS
RECENT COMMENTS
  • User Avatar
    santhiya on
    Create a simple CSS dropdown menu

    May 20, 8:47 AM
  • User Avatar
    Ineke on
    Simple CSS Drop Down Menu Updated

    May 20, 8:03 AM
  • User Avatar
    Ineke on
    Simple CSS Drop Down Menu Updated

    May 20, 8:01 AM
  • User Avatar
    Ineke on
    Simple CSS Drop Down Menu Updated

    May 20, 7:59 AM
  • User Avatar
    Ineke on
    Simple CSS Drop Down Menu Updated

    May 20, 7:57 AM
    • SUBMIT A TUTORIAL
    Intrested in publishing some snippets on handyHTML?

    We welcome anyone who is intrested in sharing their handy snippets with others.

    Simply get in touch with us today!
    SITE STATS
    Total Submissions: 4, 237
    Total Members: 1,027
    Newest Member: UserName
    - View Top Rated Submission
    - View Top Viewed Submission
    Latest news
    handy-HTML’s new member system is nearly up and running, it has lots of features and is the biggest collection of web development tutorials, snippets and resources on the net.. Continue Reading
    12 July 2012
    handy-HTML’s new member system is nearly up and running, it has lots of features and is the biggest collection of web development tutorials, snippets and resources on the net.. Continue Reading
    12 July 2012
    LATEST TWEETS
    Copyright ©2013 handyHTML | All Rights Reserved HOME - ABOUT US - TOS - MEMBERSHIP - ADVERTISING - WEB DESIGN & DEVELOPMENT