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.

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!

Like this Article?

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,926 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,926 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
15,484 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,926 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
7,834 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
15,484 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
7,834 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
15,484 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,926 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.

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.

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