Snapshot of Simple CSS Drop Down MenuThere 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 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 <body> section of your webpage.

<ul id="drop-nav">
  <li><a href="#">Support</a></li>
  <li><a href="#">Web Design</a>
    <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 customize the menu and make it your own.

Continued Education in Course 203: Using and Understanding CSS
You are viewing Section 1: Simple CSS Drop Down Menu
Section 2: Introduction to CSS
Did you find this article helpful?

We value your feedback!

Why was this article not helpful? (Check all that apply)
The article is too difficult or too technical to follow.
There is a step or detail missing from the instructions.
The information is incorrect or out-of-date.
It does not resolve the question/problem I have.
How did you find this article?
Please tell us how we can improve this article:
Email Address
Name

new! - Enter your name and email address above and we will post your feedback in the comments on this page!

Related Questions

Here are a few questions related to this article that our customers have asked:
Ooops! It looks like there are no questions about this page.
Would you like to ask a question about this page? If so, click the button below!
Ask a Question
2013-07-17 5:14 am
Drop down menus are good for providing hidden sub menu items when clicked. These are good in Google Chrome and Mozilla but in IE 6+ will not work where Jquery to be included. Thanks for providing source codes as most the sites hide /link their css codes.
2013-11-25 1:00 pm
Hi, how do you put the menu in the center of the webpage?
Im very new on Dreamweaver, so I need a bit help! :)
Staff
9,968 Points
2013-11-25 1:40 pm
Hello SynneLudvigsen,

If you wanted to put the menu in the center of your page, you could do so by editing the CSS from this:

<style type="text/css">
ul {list-style: none;padding: 0px;margin: 0px; }


To this:

<style type="text/css">
ul {list-style: none;padding: 0px;margin: 0px; width: 390px; margin-left: auto; margin-right: auto; }


First you are defining a width that's wide enough to hold all the text in your menu, then you set both the margin-left and margin-right values to auto which will automatically figure out how large the margins need to be from the left and right in order for the content to remain centered.

If you wanted to have the menu just pushed from the left-hand side a particular amount you could just do:

<style type="text/css">
ul {list-style: none;padding: 0px;margin: 0px; width: 390px; margin-left: 150px; }


Then the menu would be hugging the exact same spot on the screen, but pushed in 150px from the left-hand side.

Please let us know if you had any other questions at all!

- Jacob
2013-11-25 3:58 pm
Omg, thank you so much! It worked!

But now a new problem appeared. The dropdown menu became bigger in size than the "official" menu, and I want them to be similar i size. If you understand my bad english. :- )
Staff
9,968 Points
2013-11-25 6:12 pm
Hello SynneLudvigsen,

Ahh you're right! This is caused by the CSS for the li:hover ul element, it should look like this right now:

ul li a:hover {background: #f00;}
li:hover ul {display: block; position: absolute;}
li:hover li {float: none;}


Try defining the width to a size that matches your menu elements:

li:hover ul {display: block; position: absolute; width: 150px;}


Let us know if you're still having any problems!

- Jacob
n/a Points
2014-07-22 3:18 pm

Hi,

i am new to css so i need some help...

Staff
17,273 Points
2014-07-22 3:32 pm
Hello MD NISHAD HUSSAIN,

If you can please explain in detail where you need help, then we would happy to work with you to find an answer. Please explain the problem and any steps needed to duplicate an issue if you are indeed encountering one.

Kindest regards,
Arnel C.

2013-11-25 6:16 pm
Thank you so much, Jacob!
Your a real lifesaver!
This will help me so much with my exam!
Again, thank you!!!!! :-D
Staff
9,968 Points
2013-11-25 6:42 pm
Hello SynneLudvigsen,

Awesome, no problem at all, glad I could help :)

If you're ever interested you can also always ask a question to our public Q&A section if you needed help with anything else.

- Jacob
n/a Points
2014-05-04 2:57 am

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

Staff
9,162 Points
2014-05-05 12:35 pm
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?
n/a Points
2014-03-09 8:12 am

this is a media query code . how can i use your dropdown code into this responsive design??? 

 

@media screen and (max-width: 480px) {

 

#skipTo {

display: block;

}

 

header nav, #main, aside {

float: left;

clear: left;

margin: 0 0 10px; 

width: 100%;

}

header nav li {

margin: 0;

background: #efefef;

display: block;

margin-bottom: 3px;

}

header nav a {

display: block;

padding: 10px;

text-align: center;

}

}

n/a Points
2014-03-24 7:15 pm

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.

Staff
17,273 Points
2014-03-24 8:21 pm
Hello Ernst,

I'm not sure what code you are using, but check out this link: CSS3 drop down menu. The child elements have a HOVER option set in the CSS that should apply the behavior you seek.

Regards,
Arnel C.
n/a Points
2014-03-25 4:26 am

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

Staff
9,162 Points
2014-03-25 7:45 am
We are unfamiliar with ASP as we do not operate any Microsoft servers. You may, however, do this with CSS using this article.
n/a Points
2014-04-18 12:06 am

Thanks, I"m new to this!

n/a Points
2014-05-10 5:05 pm

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

 

Staff
17,273 Points
2014-05-12 1:29 pm
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.
n/a Points
2014-05-12 4:53 pm

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

Staff
9,968 Points
2014-05-12 5:18 pm
Hello Phil,

It can be a bit hard to follow along when first using CSS and HTML so don't worry. I'd work with copying the example exactly as it is in this article, then working backwards to see how things function after ensuring the example works as intended.

Essentially the CSS code that you place before the closing <head> tag in your HTML page sets the un-ordered list <ul> items which are the <li> list-items, to be hidden with this line of code by default:

li ul {display: none;}



Then if the browser detects a mouse hovering over the <ul> it instead displays it as a block item so it's viewable:

li:hover ul {display: block; position: absolute;}



The background colors changing is simply coming from the <a> anchor tags being hovered over with this line of CSS:

li:hover a {background: #f00;}



Or if it's a drop-down, its background color is changed by this CSS code:

li:hover li a:hover {background: #000;}



So it sounds like you might possibly either be missing some of the CSS code in your HTML page, or that you're not using a second set of <li> list-item elements inside of another <ul> un-ordered list.

Hope that makes sense, please let us know if you're still having any issues getting it figured out.

- Jacob
n/a Points
2014-06-26 12:01 pm

wow... this  simpler yet  amazing example of dropdown menu, thank you :)

n/a Points
2014-07-12 1:13 pm

This post is realy good. the post realy help me the create menu bar.

n/a Points
2014-07-19 5:40 am
i don,t have any idea for drop down manu..this web site very helpful. thank for this site andmin.
n/a Points
2014-07-24 1:30 am
you should make demo of your live preview of your article , and should comment all your code ;)
n/a Points
2014-07-30 6:40 am
improve stylesheet
n/a Points
2014-08-05 6:07 am

That is really good, but how would I get a drop down without changing much of the CSS or HTML?

This is my CSS

.header {

height: 80px;

background: white;

position: fixed;

width: 100%;

z-index: 10;

}

.nav a {

  color: #5a5a5a;

  font-size: 11px;

  font-weight: bold;

  padding: 14px 10px;

  text-transform: uppercase;

  font-family: 'Times New Roman';

}

 

.nav li {

  display: inline;

 } 

  .backdrop {

  background-image:url('back.jpg');

  height: 450px;

}

 

This is my HTML

  <div class="header">

    <div class="nav">

      <div class="container"> 

        <ul class="pull-left">

<li><a href="#"><img src="/support/hre1.png"/></a></li>

        <li><a href="#">Home</a></li>

<li><a href="/support/about.asp">About</a></li>

<li><a href="/support/work.asp">Our Work</a></li>

        </ul>

        <ul class="pull-right"><br>

<li><a href="/support/cont.asp">Contact</a></li>

<li><a href="/support/news.asp">News</a></li>

<li><a href="/support/videos.asp">Videos</a></li>

        </ul>

      </div>

    </div>

</div>

Staff
19,427 Points
2014-08-05 8:14 am
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
n/a Points
2014-08-08 9:28 am

How do I change the background color behind the top row (Support, Web Design, Content Mangement, ...).

Staff
19,427 Points
2014-08-08 9:37 am
Hello Samar,

You would need to simply assign a background color for the li tag under the drop-nav id. You may want to give those particular li tags a class or id so it stays unique to the ones you want to highlight.

<li><a href="#" id="abc">Support</a></li>

#abc {abckground-color: red;}


Kindest Regards,
Scott M


Kindest Regards,
Scott M
n/a Points
2014-08-09 2:33 pm

Please look at http://bethelpennington.org/dropdownmenu/

How do I make the background of the top menu look like the menu below.

You can view the page to see the coding.  Please add the one or two lines necessary to change the background color of the top menu.  I am able to handle the underlines and the text color.

Thank you,  Samar

Staff
9,525 Points
2014-08-11 11:58 am
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
n/a Points
2014-08-10 6:47 am

hi guys here is the css code 

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

 

but i cant click on the menu links when i hover over one of the menus. what am i doing wrong?

Staff
9,525 Points
2014-08-11 12:54 pm
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
n/a Points
2014-08-20 9:08 am

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

Staff
9,525 Points
2014-08-20 10:54 am
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
n/a Points
2014-08-30 5:38 pm
n/a Points
2014-09-02 2:10 am
please show a demo of the style from which we can improve our style
Staff
19,427 Points
2014-09-02 12:26 pm
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
n/a Points
2014-09-17 10:16 am

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

Staff
9,162 Points
2014-09-17 11:47 am
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.
n/a Points
2014-09-20 9:55 pm

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.

Staff
19,427 Points
2014-09-22 8:48 am
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
n/a Points
2014-09-30 3:35 am

hi sir,

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

Staff
9,525 Points
2014-09-30 9:38 am
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
n/a Points
2014-10-13 11:39 pm

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?

Staff
9,162 Points
2014-10-14 8:50 am
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?
n/a Points
2014-10-14 1:36 pm

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.

Staff
9,162 Points
2014-10-14 1:42 pm
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.
n/a Points
2014-10-14 1:53 pm

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?

Staff
9,162 Points
2014-10-14 1:54 pm
To clarify, are you trying to place this inside the image, or next to it?
n/a Points
2014-10-14 2:06 pm

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.

Staff
9,162 Points
2014-10-14 2:13 pm
To align it to the bottom right, you would add this to your CSS:

position: absolute;
bottom: 0;
right: 0;

n/a Points
2014-10-15 3:32 pm

Hi, I wonder if you can help me.  I took another approach, and now have a dropdown menu that appears when clicking on a hotspot in an image map. However the code I 'borrowed' from the internet causes the menu to dropdown when clicking, but does not dissapear when clicking again.  I would like to add a behavior so that the menu dissapears upon clicking the hotspot again.  Here is the code - can you help, or in the alternative, provide the code that would cause the menu to appear and dissapear on hover?

<html>

<head>

  <title>Home</title>

<style type="text/css">

<!--

#content {

position: relative}

 

#content a {

display: block}

 

#menu1, #menu2, #menu3, #menu4 {

display: none}

 

#menu1 {

position: absolute;

text-align: left;

top: 280px;

left: 615px;

background: #379D9E;

font-size: 12px;

line-height: 24px;

color: white}

 

#menu2 {

position: absolute;

top: 100px;

left: 300px}

 

#menu3 {

position: absolute;

top: 250px;

left: 20px}

 

#menu4 {

position: absolute;

top: 250px;

left: 150px}

-->

</style>

<script type="text/javascript">

<!--

function showMenu(menuId)  {

//hide all the menues

document.getElementById('menu1').style.display="none";

document.getElementById('menu2').style.display="none";

document.getElementById('menu3').style.display="none";

document.getElementById('menu4').style.display="none";

//display the menu for this area of the image

document.getElementById(menuId).style.display="block";

}

//-->

</script>

</head>

<body>

<table

style="background-color: rgb(102, 102, 102); width: 100%; height: 32px; text-align: left; margin-left: auto; margin-right: auto;"

border="0" cellpadding="0" cellspacing="0">

  <tbody>

    <tr>

      <td

style="text-align: center; background-color: rgb(102, 102, 102);">

<div id="content">

<img style="border: 0px solid ; "ID="home";  src="/support/http://teamspace.merck.com/sites/ahoperations/Images1/home1.jpg" alt=" " usemap="#map1413342841971">

<div id="menu1">

         News Menu:

        <a href="/support/link1.htm">People on the Move</a>

        <a href="/support/link2.htm">Link2</a>

</div>

</div>

</td>

    </tr>

  </tbody>

</table>

<p align="center">&nbsp;

<map id="map1413342841971" name="map1413342841971">

 

Staff
17,273 Points
2014-10-15 4:10 pm
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.

Post a Comment

Name:
Email Address:
Phone Number:
Comment:
Submit

Please note: Your name and comment will be displayed, but we will not show your email address.

57 Questions & Comments

Post a comment

Back to first comment | top

Need more Help?

Search

Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail: support@InMotionHosting.com
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!