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.
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.
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.
There are many different ways to set up a comment form. We have a more complete guide on how to make a basic comment form using PHP and a MySQL Database.
You can have two columns for a ul section using the float property or a similar function, or you may consider using a table.
Thank You unfortunately I went with a web template that has a fixed menu it’s not what I want but it’s real detailed in the css and I’m afraid of messing it up to get the drop down I want.
Hello Rich_R,
Thank you for contacting us. You can adjust the font size by using the font-size property.
Like many coding solutions, there are multiple ways to adjust the drop-down size. For example:
in the rule:
ul li a
see the line for ” padding:Â 5px 10px 5px 10px;”
the two 5px paddings will adjust the padding in the top and bottom of the menu, making the height appear taller/shorter.
You will have to adjust the code and test to ensure it is meeting your needs.
Thank you,
John-Paul
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.
Hello Deebendra,
Thank you for contacting us. Can you provide a link to the menu for us to test?
Thank you,
John-Paul
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.
Hello Ehtisham,
Thank you for letting us know about the extra tag in that line. We’re going to include that change in an upcoming update for this article.
By “sub select” do you mean “Selector”? If so, then you would need the rule you want to include in your stylesheet.
Here is a list of selectors you can use: https://www.w3schools.com/cssref/css_selectors.asp
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.
Hello jonnie,
Thank you for contacting us. I found a possible solution through online search here: Creating Drop Down Menu on click CSS.
Thank you,
John-Paul
Hello KS,
You can provide CSS code for a specific item or menu within your CSS, but you have provide specific labels for it and then modify your code so that it’s identified that way. If you’re not familiar with CSS code, then you may want to look for a tutorial such as this one, or consult with a developer or programmer. Providing specific coding support is beyond the scope of our support. However, hopefully the answer provided above gives you enough information to resolve your problem.
If you have any further questions or comments, please let us know.
Regards,
Arnel C.
How to make drop down menus visible when i have menus on the top frame. as menu gets hidden behind the main frame
the dropdown menu is not appears but does not show over the flash image right below the menu. Any help?
Edmund, we need a bit more information. Do you have a link to it so we can see it?
Hello Bruce,
In CSS you would use a . to identify the class, such as if your ul had a class of menu-links then in your CSS code you would have .menu-links { css stuff};
Best Regards,
TJ Edens
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
You may want to see if setting a z-index property helps.
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 </a> in the code right after Web Design please add </li>. That should fix your issue.
Best Regards,
TJ Edens
thanks for code sir!!!
Hello Lama,
Sorry, but the code provided above was not made for the purpose being used in a table like you’re doing. As it is, providing the necessary code is outside of the scope of our support. You will need to look into modifying the CSS in order to change the position or properties of the dropdowns so they are not interefered with next element below them. Apologies that we can’t provide a direct answer.
If you have any further questions or comments, please let us know.
Regards,
Arnel C.
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
create css and imliment the class in html page or given the center tag after thAT the menu are shown in center
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!
Can you advise on how to assign this classes so it won’t affect my other list items on the page?
Thank you this was extreamly helpful
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=”https://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=”https://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
You Post is very nice for those who is beginer in the webdesigning.
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
above code not working in IE8
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.
sir, i have problem. i want to design menu in various mode and different style.
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
hi! thanks for dropdown menu!
but there is something i want .
dropup menu
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 <div< 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
How do make it work on mobile? When it’s in a hamburger menu.
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
Very helpful. It works!
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 Miko,
You can adjust the font size by using the font-size property.
Kindest Regards,
Scott M
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
Be sure to place the CSS mentioned above in the article within the <head> tags on the page. Without them, it will just appear as a list.
please can someone tell me that how can we change the menu’s width?
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.
Hello Bradley,
Have you tried separating them into different CSS classes?
Kindest Regards,
Scott M
make an easy code
Using the above “Simple CSS Drop Down Menu” example; I have a long list of dropdown items that extend below the bottom of the page.
How can I make it scroll automatically when I reach the bottom item? Thanks Gary
Hello C-TAC,
Thanks for the question. The “li” commands are list elements within that make up the menu, so changing it to visibility would disrupt that list. So, in regards to how this was coded, you cannot change the code to use “visibility” in its place as it would negate part of the behavior defined in the CSS as part of the menu structure.
Regards,
Arnel C.
Being new to this, a little more explanation as to what the CSS is doing would have been great. Nonetheless
very helpful.
Hello Beth,
Thanks for the question. We generally do not provide programming services within our Support Center. However, we do try to provide solutions or at least get you pointed in the right direction if we see a good answer. This article’s intent was to provide a simple CSS option to create drop-down menus. However, in your case, you need to handle an event so that the menu hides after you click. When I looked around, I did find some javascript that you may want to add that can handle this event. Check out this post that shows how to hide a menu after a click.
Hope that helps! Please let us know if you have any further questions!
Arnel C.
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.
To align it to the bottom right, you would add this to your CSS:
position: absolute;
bottom: 0;
right: 0;
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?
To clarify, are you trying to place this inside the image, or next to it?
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
Its fine the way it is, but maybe add something about the variables.
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.
Hello Parthiban,
We would love to assist, but we need you to be a bit more specific as to your request.
Kindest Regards,
Scott M
please show a demo of the style from which we can improve our style
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
Hello richard,
Thank you for your question. I don’t see anything here that would stop you from clicking a link.
We are happy to help, but will need some additional information, such as the domain name of the site.
If you have any further questions, feel free to post them below.
Thank you,
-John-Paul
Hello Samar,
Thank you for your question. I looked at your site, and the background for the top menu was set in the home.css file, on line: 125.
I added the background color with the following code to the a:link section like this:
a:link {background: #2E3A3F;
If you have any further questions, feel free to post them below.
Thank you,
-John-Paul
How do I change the background color behind the top row (Support, Web Design, Content Mangement, …).
Hello Christian,
I do not understand what you want to do. This article is about creating a dropdown menu with css and html. This means if you want to duplicate it you will need to change your current html and css to match. If you have a different goal or question, feel free to start a new question thread in our Ask a question section!
Kindest Regards,
Scott M
This post is realy good. the post realy help me the create menu bar.
i don,t have any idea for drop down manu..this web site very helpful. thank for this site andmin.
wow… this simpler yet amazing example of dropdown menu, thank you 🙂
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
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=”https://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?
Thanks, I”m new to this!
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.