Simple CSS Drop Down Menu

In this article:



There are many free CSS menus online that you can use to build into your Website. Some of them require JavaScript and some do not. This article will show you how to add a menu to your website with CSS only. This allows you to create a drop down menu without JavaScript experience.

Example of the menu will appear

CSS code for Drop Menu

The code below will need to be inserted into the <head> section of your Website. You can also insert the code into an external CSS style sheet.

  <style type="text/css">
  ul {list-style: none;padding: 0px;margin: 0px;}
  ul li {display: block;position: relative;float: left;border:1px solid #000}
  li ul {display: none;}
  ul li a {display: block;background: #000;padding: 5px 10px 5px 10px;text-decoration: none;
           white-space: nowrap;color: #fff;}
  ul li a:hover {background: #f00;}
  li:hover ul {display: block; position: absolute;}
  li:hover li {float: none;}
  li:hover a {background: #f00;}
  li:hover li a:hover {background: #000;}
  #drop-nav li ul li {border-top: 0px;}
</style>

HTML code for the Drop Menu

The below code is the HTML code for the menu itself. The Menu is in HTML list tags and are floated to give the inline look. You can paste the code anywhere you like (Usually at the top of your page) in the section of your webpage.

  <ul id="drop-nav">
<li><a href="#">Support</a></li>
  <li><a href="#">Web Design</a></li>
    <ul>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
    </ul>
  </li>
  <li><a href="#">Content Management</a>
    <ul>
      <li><a href="#">Joomla</a></li>
      <li><a href="#">Drupal</a></li>
      <li><a href="#">WordPress</a></li>
      <li><a href="#">Concrete 5</a></li>
    </ul>
  </li>
  <li><a href="#">Contact</a>
    <ul>
      <li><a href="#">General Inquiries</a></li>
      <li><a href="#">Ask me a Question</a></li>
    </ul>
  </li>
</ul>

That’s all there is to it. You can now customize the menu and make it your own! In our next guide, learn how to Align and float images with CSS.

Thoughts on “Simple CSS Drop Down Menu

  • Thank you so much for this tip.
    Placing
    z-index: 2;
    at the end of the supplied CSS line (as bellow):

    li:hover ul {display: block; position: absolute; z-index: 2;}

    …allowed two menu bars to be placed one atop the other while allowing the top bar’s menu to flow down ‘above’ the lower bar instead of ‘beneath’ it.

  • I like your work but please I would like to have  a message box just as this one you’ve provided for your repliers. Thanks. I like the feasibility at the comment field.

  • Hello,

    My menu item and submenu item are having some gap. so When i am tring to select down submenu item, beforethat submenu items are disaapering. Need some help.

  • It works great except on an iphone. The formating is there but the drop downs don’t drop down. It works fine on my android however. But because you can’t “hover” on a touch screen I had to remove the href from the display name of each pull down or else it actives the link and shoots you into Narnia. With no href on top touching = hover and the menu shows. Then you can activate each link as desired. I had to adjust the text colors accordingly. The real problem is no pull downs on the iphone. I need iphone compatability. Thanks.

  • good work for this but is there away to make the nav drop down on click and not hover?

    ive looked all over and tryed alsorts but nothing works.

     

  • How to make  drop down menus visible  when i have menus on the top frame. as menu gets hidden behind the main frame

  • The code above is working well but the dropdown are not being visible when used in multiple frame context.It is being hidden under  the other frame. It would be helpful if you solve my problem

  • hello sir. i have a problem.when i place my pointer on webdesign,it show html and others. but they did’t show when i move to them, html……

    please help ….

    sorry for my bad english

    • Hello Kooo,

      Thank you for providing the error in the code, I have already updated the article. After the &lt/a&gt in the code right after Web Design please add </li&gt. That should fix your issue.

      Best Regards,
      TJ Edens

  • I use godaddy website builder and have added CSS3 code to the “Site-wide Code” section.  When I publish my page nothing shows up.  Confused…

    • Hello Dave,

      You may want to contact Godaddy’s support team as there may be an issue with their builder for what you are trying to do.

      Best Regards,
      TJ Edens

  • I’ve made up class for the dropdown menu, but it still affects all other list (ul, li elements). Maybe I don’t understand where to put the classes in css, so can you give an example on how to seperate this dropdown from other normal list?

    Thanks before!

  • So im trying to create a dropdown menu for the work section of my website on my navigation bar. I want it so even with my dropdown menu if I click on the work option it’ll take me to my work section and open the dropdown menu to give me the option of selecting two example projects within this work section?

    Any help given will be greatly appreciated.

    Thanks,

    Dominic

    • Hello Dominic,

      Unfortunately we are not able to provide custom solutions. If you have a specific question, we will do our best to try and answer it.

      Kindest Regards,
      Scott M

  • I just wanted to say thanks. It worked great for me 1st time and was easy to customise. Oh and kudos to you for your patience with some of the queries above lol.

  • Thank you for your reply. I’m still strugling with the menu … 

    The new arrivals .. I was expecting it to be one row of images with an arrows at each end …

     

    Kind regards

    • Hello Saleh,

      Did you install a plugin that was supposed to display the images like that? If not, you may be able to find one in WordPress. If so, please let us know the name of the plugin so we can test it on our own servers.

      Kindest Regards,
      Scott M

  • Please guys I have a problem and I wonder if anyone can help me … I have zero knowledge of theme, plugins, css and wordpress. So please explain in details .. 

     

    I have problem with the New Arrivals sliding bar of this <a href=”http://www.yourdentalsupply.com”>site</a>  … As you can see it is going to three line instead of one and it is not moving ….

     

     

    The second problem is with the menu <a href=”http://www.yourdentalsupply.com”>site</a> .. the shop menu is long and ugly just want o change it to wider menu which is divided into four columns 

    • Hello Saleh,

      Unfortunately with no knowledge, this may still slightly be above your head. Expanding the width of the menu itself is simple enough, you need to add a width setting for the particular CSS class, for example: “width: 250px;”. The hard part will be identifying the specific class that governs the menu item as well as making sure the setting does not spill over to any other items in the site.

      Feel free to visit the Theme in WordPress and use the Edit feature for the css file. Be sure to make a copy first so you do not make any mistakes you cannot recover from.

      I am unsure what you are meaning about the New Arrivals. I see three rows of images which looks fairly normal for websites. Were you expecting it to do something different?

      Kindest Regards,
      Scott M

    • Hello Rohit,

      You just need to add a width attribute to the menu for 100%. This should make it span the entire width of the page.

      Kindest Regards,
      Scott M

  • Thanks for the tutorial but i have one problem.

    The navigation bar does not strech to the entire length of the page.

    please tell me how to make it strech to the entire length of page.

  • Hello,

    please can you help me, how can I write the CSS if I want to add another line (Something like “ul li li”..)?

    Thanks

    • Hello Martin,

      You would simply add it to the current list using the same format as above for the CSS. You would then add your specific rules to that line.

      Kindest Regards,
      Scott M

    • Hello Venkatesh,

      If you’re problems with IE8, then you will need to review the IE8 CSS Compatibility. This will help you identify what work or doesn’t work in CSS. I hope this helps to answer your question, please let us know if you require any further assistance.

      Regards,
      Arnel C.

    • Hello Abhishek,

      Can you please provide more information so we may try to point you in the right direction? What type of modes/styles would you like to create your menu in?

      Best Regards,
      TJ Edens

  • PLEASE HELP i am new in this

    i have made a dropdown menu in my blog but i dont know how to add links for the dropdown menu to open another page 

    can anyone tell me how to open another page when we click on dropdown menu 

     

    • Hello kwacz,

      Thank you for contacting us. I found some possible solutions for a Drop-up menu via online search, although you will have to customize the code to suit your site.

      Thank you,
      John-Paul

  • These codes were great and very easy to use! A bit of alteration-observation of changes in Dreamweaver and I gained a good idea of how the different pieces of code work. It was pretty easy for me to then make further alterations and adjustments to get the setup just the way I wanted it.  I am returning to coding in a very minor way, and felt uncertain about integrating new(to me) code with my previous html and java knowledge, but this worked smoothly.Nice work!

    • Hello Janys315,

      Apologies, but we unfortunately do not provide coding support. You may want post your questions in forum such as this one in order to get help with your code. Apologies again that we can’t provide direct assistance. If you have any further questions or comments, please let us know.

      Regards,
      Arnel C.

  • Hello Team.

    I need a help.

    I want two drop down boxes for example first drop down box shows list of countries second one contain states based on the first drop down country selection the list os states should be shown in second drop box.

    Does this possible, if can then help me how to do it.

     

    I need it for my college project submission.

     

    • Hello,

      What you are looking for would not be populated via CSS but rather PHP and use data from a database to populate the second dropdown.

      Unfortunately we cannot provide custom coded solutions.

      Kindest Regards,
      Scott M

  • Hi, I have a header for my website and I’d like to have this menu item below the header. This code though makes it stick to the top of the page. Which attribute relates to this and how do I fix it?

    • Hello Jonathan,

      Thank you for contacting us. You can adjust the &ltdiv&lt tags to adjust the location of them on the page.

      You will have to work with your site code, and test until it is where you need it to be.

      Thank you,
      John-Paul

    • Hello John,

      It should work the same, but you would likely need to adjust the csst to be responsive or specific to mobile.

      Kindest Regards,
      Scott M

  • How make the drop down menu/list/sub font bigger? font style? and the sub part how to make it to left align?

     

    thx. this finals project is hard =(

    #website

     

     

  • Hello, 

    I need some help. I have done all the code and adapted it. But I need help making a submenu as it won’t work with what I’ve tried…

     

    thanks

    • Hello Jordan,

      Did you start with the code from the article? It should work as it is and you can begin modifying from there. As it is only CSS you will likely just need to go over your syntax carefully.

      Kindest Regards,
      Scott M

  • Hi,

    I am using a very similar code to create a drop down navigation on a joomla site. It worked to begin with before i finished creating the last 2 pages links on the navigation bar however now the drop down only appears on the associated pages

    e.g menu 1 page will show sub menu 1,2,3 from menu 1 tab, however from home page the sub menu items will not appear.

    I am using a template i created in joomla so nothing should be interferring. Any help to why this is happening?

     

    Thanks.

    • Hello Emma,

      Thank you for your question. It is difficult to say without know how your theme/site was coded/developed.

      Since the above guide is not for Joomla, it may be difficult to follow. I found a helpful article via online search, where they specifically walk you through Creating Drop-down Menus in Joomla. This takes advantage of Joomla’s built-in ability to create drop down menus.

      If you have any further questions, feel free to post them below.

      Thank you,
      John-Paul

    • Hello Safwan,

      Using CSS you should be able to give the ul a class and then assign a width to it to change the width.

      Kindest Regards,
      Scott M

  • Ok, so I’m running into a problem. I have a navigation bar at the top of my page (e.g. header). These are set under a <div class=”nav”>. Only ONE of my nav links has a drop down menu. So I took your code and stuck the <div id=”drop-nav”> above the one navigation link. The drop down menu now works fine. The problem is: in the css the ul and li selectors seem to be effecting the rest of my navigation links. Now I can’t get my nav links to line up on the navigation bar where I want them to be. If anyone has any solutions plz let me know.

  • The menu should be below and to the right.  Ideally, I would be able to position it exactly where it looks best on the page.  With the code I have tried in the past, the menu moved around when the browser was resized.

  • ok.  What is the CSS I would use to locate the menu to a particular section, and then position it exactly where i want it to be, relative to the image section?

  • I dont see how to attach a screen shot here, but basically i have a single table row colored dark gray.  In the middle of that table row i have an image.  At certain points on the image i would like to display a drop down menu.  If you imagine the image is a map of the US, when hovering over Ohio, i would like to see a dropdown menu of Ohio resources.  Hope that helps.

    • To do what you’re referring to, you would need to separate different locations within the image, usually by slicing it into different sections, then each of the pieces would be different menu items.

  • Hi, I need to position the dropdown from teh left edge of an image, the image is within a table cell.  Does the margin:left parameter use the edge of the browser or theedge of an image?

    • margin-left sets the margin within the specific element you are selecting. Could you provide a screenshot of what exactly you are trying to do?

  • hi sir,

               i need one designed horizontal Top menu CSS for one wedding decorations site please help me ,Thanx in advance

    • Bala,

      Thank you for contacting us. While we are more than happy to guide you, if you need something custom designed it is better to contact our Web Design Services.

      They can discuss what you are looking for, and help custom design your website.

      If you have any further questions, feel free to post them below.

      Thank you,
      John-Paul

  • Hello, I’m new to this field so I need some help.

     

    Can dropdown menu be made with the help of css2 !?

    If yes then please help me, cuz I was asked to make a mini project with the help of css & html.

    • Hello Varun,

      Yes, you can make dropdown menus with any CSS version. Unfortunately, beyond what is above, we do not perform custom code requests.

      Kindest Regards,
      Scott M

  • Scott,

    Thanks for the script, it works great!!

    How can put this code inside a table of one row as I want to create a navigation bar acoss the screen with potential future additional items, do not want to have a navigation bar shorther than my banner (I am having a banner inside a table – 95% width)

    Also, how can change the background height of the main navigational items.

    Thanks,

    Ram

    • The background height will adjust based on the content provided within it. Although I highly recommend against the use of tables unless it is actual data being presented, the menu can be placed within a table by simply placing the HTML for the unordered list within the table area.

  • Hi there!

     

    Thanks for sharing such a smart and simple dropdownlist. It’s very good and I’ve had no problem customising it for my own needs… EXCEPT that the css you have provided is affecting all the other lists on my page.

    How should I change the css rules so that they only affect sub elements of #drop-nav ? I tried prefixing each rule with #drop-nav but that just broken everything. I’ve been reading through the css styling guidelines but I can’t seem to relate it to your real world example!

    – Angus

    • Hello Angus,

      Thank you for your question. We are happy to help, but will need some additional information.

      Are you using a CMS such as WordPress, Joomla, Drupal, Concrete5? If so, which one, and what themes/addons are you using?

      Can you provide a link to the site having problems? This will allow us to look at your specific site setup and menus.

      If you have any further questions, feel free to post them below.
      Thank you,

      -John-Paul

  • Thanks.

    I understand the href=… bit; what would that be for hovering over the link to make the rest of the menu ‘pop out’?

    Sorry if I’m asking an (apparently) dumb question!  The coding given looks like it should do exactly what I want, if I could work out the customisable parts!

    Thank you for your help,

    Phil (easily confused!)

  • I can get all of this working except the ‘pop out’ element!  The relevant menu items change colour according to whether or not you hover over them, and the one item (at present, until I get it working) that should have a ‘pop out’ gets a highlight-coloured line underneath it, and that’s it.

    I don’t know whether it’s related, but what should go where the hash is in the code above

     

     <li><a href="#">Content Management</a>

    (and equivalent lines)?

    Thanks

     

    • Hello PhilD,

      If you are not filling in the link or anchor ID in place of the hash, then the menu won’t work properly. If you’re using a page link, then the HREF will look like this:

      <a href=”http://example.com/abc.html”>Example page ABC</a>

      If you’re using an ANCHOR to jump somewhere within a page, you would set the following right above the section you’re trying to jump to:

      <a id=”anchorname”></a>

      Then you would make the HREF look like this:

      <a href=”#anchorname”>Anchor name</a>

      I hope that helps to explain it for you! Please let us know if you have any further questions or comments.

      Regards,
      Arnel C.

  • This is fantastic for the navigation thanks. I have one problem though and I am trying to make a list further down and it won’t work for me, I thinks it’s something to do with the <ul> that links it and I”m new and can’t work out how to fix it. The list looks normal until I use <ul>.

    • The reason that your unordered lists may look different is due to the CSS within the menu that controls the look of your unordered lists. I’m not sure what you are describing as to what it looks like. Could you provide an example?

  • Hi, how do you put a horizontal drop down menu in asp.net menu bar?
    Im very new on asp.net, so I need a bit of help! πŸ™‚

    • We are unfamiliar with ASP as we do not operate any Microsoft servers. You may, however, do this with CSS using this article.

  • I love that you can do these kinds of things with such simple, straight forward code. Thanks for sharing!

    Is there a way to make second-tier list items fly out only when hovering over their “containg” text? With this it all comes out at once.

Leave a Reply to Jim Cancel reply