Member Panel

Create a simple CSS dropdown menu
February 15th, 2012 - 126 Comments »

 

Learn to create a very simple CSS dropdown menu with solely HTML and CSS. This is a very useful and small dropdown menu without the use of javascript!

UPDATE! I have updated the Dropdown code click here.

Let me start with the CSS code, edit the colors and sizes to suit your websites needs:

Next is the HTML code. It is structured as nested lists so that even displaying the HTML source code without any CSS style will render it with a useful structure.

That is it, very simple and easy to customize! Click below for a live demo…

 

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

 

PSDCenter.com – We convert designs to html & css

Related posts:

 

 

126 Responses

  1. Adam says:

    That is a great menu very customizable. What if I want to add another layer of drop downs in the menu?

  2. Hi Adam,

    Many thanks for the comment, if you go to http://www.handy-html.com/wp-content/uploads/2012/02/dropdown.html

    I have updated the dropdown to have a 3rd tier… Check out “Products -> Cozy Couch”

    Hope this is what you are after,

    George

    • karan says:

      hey,
      George

      this karan i want your help please suggest me that i want be a web developer i knw photoshop,css,html but i dont how to improve my skills in these formats pls suggest me how i made carrer in web developing or desning.

      pls mail me ur suggestion on karancool2010@gmail.com

      thnks….
      karan

    • Beh says:

      Hi George

      My problem is when the user clicks on the menu items the item remains highlighted and this is a show stopper. How can I “unhighlight” the clicked item and the whole menu bar?

    • Amit says:

      I have tried above code. Working well in Chrome but it is not working in IE7.
      Can you suggest some solution.

      Thanks,

  3. Adam says:

    That is exactly what I was after. Many thanks! The code is very precise and easily readable. AWESOME!

    Adam

  4. Usman says:

    Hello. Thank you so much for the drop-down menu. I was curious: if between the drop-down for my 2nd and 3rd level I get a wide empty space, how do I correct for that? The solution I’ve found so far is to add do this: li.submenu a {width: 73px;}.

    Many thanks in advance.

  5. Hi there!

    Can you send me a live preview of your dropdown and I shall see what the problem is.

    Thanks.

    George

  6. Shrez says:

    Hey George.

    It worked well for me after having a toughtime with javascripts. Thanks a lot :)

  7. qwertybird says:

    Worked perfectly! Thanks!

  8. Shruti says:

    Using these code my drop-down menu get disappear as I hover the drop-down menu.

  9. Shruti says:

    So can u please suggest me the solution for this problem.

  10. Certainly, can you send me a preview of your dropdown menu?

    George

  11. bridget says:

    Thanks this is great … a refreshing change after trying to use spry menu widget in dreamweaver.

  12. Jared says:

    Hi – Just one thing, this doesn’t work in IE 6. I usually need some javascript for it to work in IE 6. Do you have specific code? Otherwise I’ll just use what I have.

  13. Christopher says:

    How do I float the drop down right. I want to do something like face book log out menu, but my tweeks don’t seem to work

  14. Tk says:

    Hi there,
    The drop down does not work on IE 9, please help

  15. mohit says:

    how can i make sub menu in this menu

  16. Hi Mohit, Many thanks for the comment, if you go to http://www.handy-html.com/wp-content/uploads/2012/02/dropdown.html I have updated the dropdown to have a 3rd tier… Check out “Products -> Cozy Couch” Hope this is what you are after, George

  17. Ravikant says:

    Thank You so much..

    This is very good website for learning css and others language
    :) :)

  18. Ravikant says:

    please suggest me sub menus css like this type simple and sower

    please ….

  19. Thank you Ravikant!

    Big things to come on handy-HTML.com

    Do you mean you want to add another tier to the sub menu? If so try… http://www.handy-html.com/wp-content/uploads/2012/02/dropdown.html

    Hope this helps.

    George

  20. xeet says:

    one thing is missing the use of id=”menu” in html. Is it necessary to….

  21. Nick says:

    Hi, I put this all together in a div tag and I want the div to float: right; but when I set this in the css, the menu links are no longer active and the drop-down disappears. Can you help with this?

  22. @XEET – No, the id=”menu” is not required with this simple mock up, maybe required if integrating into a more feature rich website.

    @ NICK – Sure I can help,can you send me a live preview of what you have and I will sort it out for you.

    Many thanks,

    George

  23. Jaan says:

    Hi George, great guide, there is two things I’d really like to do and I cannot figure out for life of me how to do it.

    1. I’d like to move the text to the center of the block, rather than have it stuck at the top, how would you do that?

    2. Is there any way to change opacity of just the top bar without affecting drop down menus? I am trying to add a background image on that area, so would like remove the top bar colouring.

    Thanks
    J

  24. Hi J,

    Thanks for the comment. I would be happy to help you, please just send me a link to what you have already and I can then assist with your code.

    Many thanks,

    George

  25. Dave Macleod says:

    Hi George
    Really like your drop down but have tested your live preview in ie7 and ie9 and it doesn’t work – the dropdowns don’t stay long enough to be able to click on them
    Any thoughts…?
    Dave

  26. Hi Dave,

    Thanks for the comment! I have tried and tested the menu in IE7, 8 and 9 and all works fine for me this end?

    Could you have accidentally edited any of the code? Can you send me a link to your menu and I shall take a look for you.

    George

  27. Xavi says:

    Can you add a background image to this menu? I thought I knew how as I make menus like this in wordpress often but I am trying to implement a look alike that I have on my wordpress (that has a background image and text shadow) on my prostores site. Thanks in advance and great blog post.

  28. Tharaka says:

    Thanks, it helps lot.

  29. Oliver says:

    This was exactly what I was looking for a simple CSS based menu. Works great thanks!

  30. Alexis says:

    Clean, Clean, Clean! I love it, you took something that I’ve seen done with lengthy codes and suppressed it tiny and clean. Thank you!

  31. Alexis says:

    I’m going to say it one more time, this is beautiful, its just so perfect.

  32. Stephanie says:

    Hi there,

    Nice code, but it doesn’t work in IE8. All I did was check out your demo URL in IE7 and when you hover over, you can’t hover over to the children elements.

  33. Stephanie says:

    Err.. it does not work in *IE7*.

  34. Jaya says:

    Hi,thera thanx a lot for the code but the drop down is not showing while i browse the page can u plz send me a suggestion how to make it work

  35. Dave says:

    Hi George
    I didn’t realise you had replied above..! Thanks so much
    The problem I find is the dropdown works ok in ie9 or ie7 on its own but the dropdown clashes with any items situated underneath the dropdwon – pictures or other css. Seems to be a z-index problem from what I’ve read
    Any ideas to fix?
    Can i send you the problem page if that helps?
    Love the site btw
    Dave

  36. Dave says:

    Hi George
    Hope you got my message last night about z-index and ie.
    Have a look at this test page in ie 7 and 9
    http://deansways.com/handy_index.php
    You’ll see the dropdown doesn’t work properly over images
    Any ideas?
    All the best
    Dave

  37. Martin says:

    Hi, I try to do dropdown menu. But I am stuck. I want to post my hockey cards.
    I need do this:
    YEAR
    -> 1991-92 -> -> Pinnacle -> -> Dream Team -> -> Gretzky
    . 1992-93 . Parkhurst . Gold . Lemieux
    . 1993-94 . Topps . . . Roy
    . . . . . Lindros
    . . . Kariya
    . .
    . .
    Every year has more manufacturers each manufacturer has many sets and each set has many players.
    Please help me.
    Thanks,M

  38. Begsu says:

    Code looks clean. But unfortunately my IE8 refuses to show the drop down menu. I used the Doctype mentioned in your source code as well. Yet it does not work. It works fine in firefox and chrome.
    Please advise.

  39. I much prefer this to superfish or other javascript menus. Looks solid.

  40. Henry Cole says:

    Great stuff, thanks. I’m trying to implement this but I seem to have broken it a little. Perhaps if you’re still checking up comments on this post you could have a look at http://lop.li/menutest.html and tell me what you think might be wrong here? Thanks in advance!

  41. Hi all,

    I understand a few people are having problems with browser compatibility. This code is quite old, but still works for most. I will be updating the code in the next few days so that it is completely Cross Browser compatible!

    Please keep checking back. Thank you.

    George

  42. Aaron says:

    Looking forward to the update!

  43. merwyn says:

    Nice tutorial.. I will try to modify it for my blog Amazing Tuts

  44. brijesh says:

    hi i m from india and i want thanks for u becoz i will try dropdown but i cant and i said that ur sight and ur solution good, thanks for again.

  45. htoo maung says:

    I like this. I want to acknowledge your knowledge sharing. This is great for me. Thanks a lot.

  46. sanket killedar says:

    hi all
    its nice script,i relly appriciate withthis script.i totally cinfused what i do with menu bar but i got the answer
    thanks……

  47. emscee says:

    hi george how can i save the css ?

  48. Matt says:

    George,

    I cannot select the drop down menu in Internet Expolorer. It disappears unless I get lucky and hover over the link. In Firefox, it works perfectly. Any idea why it is not working in IE?

    Thanks!

  49. Matt says:

    To get the drop down menu to work in IE8, I added a “background-image” to the li:hove ul, as follows:

    li:hover ul {
    display: block;
    position: absolute;
    color:white;
    background-image: url(../images/home_bg.gif);
    }

    Now it works perfectly!

  50. David says:

    Hi,All, all i do is just copy, and paste your code in empty page. Then preview the result. I dont know why, but it doesnt work well in IE (IE 8 actually with compatibility view turned on). i just see first level, and when hover, second layer, but i cant navigate to the second layer… need help here :( . its Work FINE in Firefox.

    Regards
    D

  51. Mariane says:

    Just want to say a big THANK YOU for this post. You helped me so much with my drop down menu.

  52. Hi everyone, just to let you know. I have now updated the code, you can see the new code at http://www.handy-html.com/simple-css-drop-menu-updated/

    Thank you and enjoy!

    George

  53. gamezat says:

    thank you for this code it’s very simple and fast in old pc thanks

  54. nauman says:

    really thanks for such a simple explaination

  55. Danny says:

    Very nice tutorial, exactly what I was looking for!
    It’s simple, more than easy haha – well done.

  56. Ohli Ahmed says:

    Very very nice collection.

  57. Aanand Hari says:

    very very helpfull thank u !!!!!!!!!!!

  58. malik says:

    Thank’s I like it :)

  59. Agus says:

    1 word
    Best

  60. shikha says:

    thank’s I m serching for this code , thanks a lot:-)

  61. newton says:

    Thanks a lot dude..

  62. Jayee says:

    How can I use this with image links? Meaning, the mouse hover over link is an image but the dropdown itself will the same as shown in your demo.

  63. Edward says:

    Loved the code, out of many yours was simple and it worked, thanks!! instead of a li can i use a div , so that i can give it the style and size i want and position it as i desire??

    • Heinz says:

      Hm, what exactly do you want to do? You want to use a “div” instead of the LI and UL tags of the menu, is that right? In this case the answer is NO, this menu is designed to use the LI and UL tags to build the menu structure, which is much easier to handle than single divs. But it is possible to do it with divs, you have to create a div for each tab (or work with margin and padding, as well as text bg colors for each menu item) and a div for each dropdown box and again each sub menu item (or again work with margin, padding text bg and so on).

      You’ll have to write a complete new code to do so, I don’t understand why you would like to do that?

      If you just want to change the menus position on your page, just ad the LI and UL tags inside a div and place this div as you desire.

  64. Dhaya says:

    Not supported in Internet Explorer

  65. Apoorv says:

    this lesson finally helped me to figure out how css dropdown works…thanks mate…

  66. imam sopian says:

    thank you very much for the great collection! Go to http://cyberbusinessinstitute.com/ computer classes in Bogor ..

  67. Bill says:

    This is just what I needed, however… how do I get my menu items to auto center across the page?

    (Note: I am not a seasoned web professional)

    Thanks!

    • Heinz says:

      Hi, you’ll have to put your menu items (li, ul etc. tags) into a div or table end set align to “center”. Note taht the div/table has to be set to full width (maybe 100% if you want dynamic size) of your page or the area you want the menu to center.

      Hope that helps…

  68. Nhoc con says:

    Thanks for share, I have added it to my website !

  69. RATNODIP says:

    THANKS A LOT FROM MY HEART. BECAUSE OF THIS SITE I COULD MY DROPDOWN MENU.

  70. kate says:

    Hi there the codes brilliant thank you but how do i stretch it to fit the screen as well as make the width bigger for all of it?

    • Sin says:

      reposting because tags got deleted:

      I already “a” have and other tags defined in my CSS and it’s difficult to change them to accommodate the above. Since my coding is rather limited (I’m not sure what the difference is between ul li and li ul…), is it possible to put the entire CSS above in a “div” in order to use it for the area I want to use the drop down menu?? It won’t be a navigation menu, I actually want to use it several times in a table to give 2-3 options (remote links) for each table line entry.

  71. Beth says:

    Loved the code! easy and simple to use…however I am wanting to create a flyout menu and have the template for it so far but when i hover over certain headings the submenu does not appear! any help would be great as I have been stuck at the css and html for hours!

    • Hozey says:

      This would have to be completely rewritten for flyout. If I were you, I’d do a search for flyout menus. Stu Nicholls has several free ones.

  72. Beth says:

    Okay thanks, I’ve changed it to the simple drop down menu now…still doesn’t work though. ! Frustrating!

  73. sindhu says:

    Great code! But how can I display it in the centre in the first row of a table? Please help!

  74. Sun says:

    Now I understand very easily,and it will help me to go ahead.Thank u so so much from heart.

  75. Ryan says:

    Huge help! I was having some quirks with my current menu and this helped me straighten it out.

  76. chris says:

    George, this really good stuff and easy to custom to. I am pretty new to web building etc but i have a couple of Qs for you…How could you make the box`s larger in lenth or height as i can see any heigth or width specs in the html or the css..2nd if i have a series of coloms in seprate divs how could you put one of the drop down list in seperate divs, so each coloum/div has its own drop down. Thanks in advance and once again great stuff and thanks for leeting people share your hard work.

  77. Desmond says:

    Hi, I’m hoping you can help me create drop down menus and sub menus, i tried using your example but it just won’t work, apologies i’m not a programmer just began learning, can you help kindly?

    Here’s the code:

    Home Page
    Research
    News & Events
    Education
    About Us
    Contact Us

    Thanks in advance.

  78. Louis says:

    Can I put a picture to cover the ?

  79. Moritz says:

    Hey,
    great tutorial! And thanks for the code. It worked fine in the preview of Dreamweaver, unfortunately it doesn’t work when I want to open the savel *.htm file in Firefox or Safari. Any idea why?

  80. Nitin says:

    Hi, This menu is not working with IE7. Is there any solution for this?

  81. Kunal says:

    Hey in the html section of you had added a id named “menu”
    But in css it is not created!!!!!
    then where do i create id named menu????
    rpl ASAP..
    hnx a lot in advance..

  82. its very helpful tutorial with its easy language and easy to impliment. i used to it

  83. tara says:

    when trying to as directed i am getting an unoredered list not a menu like thing…please help

  84. Roge says:

    great example and simple to understand .. many thanks

  85. M J A says:

    Thanks alot, I have solved one of my oldest problem due to you guys.

  86. M J A says:

    This is a good example of drop down

  87. kaleem says:

    Many Thanks to u

  88. Sabin says:

    I was looking for that code for long. I found some but all written in more complicated fashion (I am new to web-world). You are simple the best. Thanks.

  89. Chris says:

    Thank you for posting this.
    I’ve been to lazy to write my own code, and this works well.

    Thank you again.

  90. vijay says:

    hey,
    George

    this vijay i want your help please suggest me that i want be a web developer i knw photoshop,css,html but i dont how to improve my skills in these formats pls suggest me how i made carrer in web developing or desning.

    pls mail me ur suggestion on b.vijaychandar@gmail.com

    thnks….
    vijay

  91. Md Fuad says:

    Wow …This is great :-)

  92. Sun says:

    Sir,its ok for Firefox…but its not happning in Internet Explore..Can u tell me pls how can it will run for all browser ??? thank you.

  93. Nick Steel says:

    This is awesome, thank you very much!

  94. Mail says:

    The code is simple and free from JS. though it is good in Chrome and sfari and higher version id IE, but is IE6 the code is not working.

    Simple version of drop down menu code is available at: http://www.freemenu.info

  95. Martin says:

    How can I resize the menu?

  96. alauddin says:

    I think it is a good css code.Using this code i have gotten benigits. Thank you.

  97. Leon says:

    Hey,
    Can you make the drop down go to the right? I would really like that.. I’m a CSS and HTML noob, and I really want to know how to do it.
    Greets Leon

  98. alex says:

    this is awesome

  99. Ngurah Eka says:

    Thanks this is awesome, but i still dont know the use of these tag in:
    ul li {display:block; position:relative;}
    ul li a {white-space:nowrap;}

    if i’m erase it, the dropdown menu still working perfectly and not changed anything…thanks

  100. vishal says:

    this tutorial is gra8

  101. David says:

    Excellent work!

  102. Jesus says:

    Many thanks for sharing a tutorial on creating a css dropdown menu. Please feel free to share the sample code at http://codezample.com/ so that people can easily demo and play with your creation.

  103. fasi says:

    Thanks a lot your code is working fine i have tried, but i want to apply the transparent (less opacity) background to dorpdown menu how to do it.please help me in this regard thanks once again.

  104. Harsh says:

    Hi,great tutorial. Learnt a lot from here. Thanks. But I have a question. Is there a way to identify which block from the drop down menu the user pressed. (I want to direct the user to another page according to user’s selection)
    Thanks again.

  105. charles says:

    hello, i try several time you codes is not working

  106. PRASANYA says:

    hello, i try several time you codes is not working

Leave a Reply