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 our Support Center:
Email Address
Optional, but our team may contact you for more information.
Like this Article?

Comments

Post a comment
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
5,534 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
5,534 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
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
5,534 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-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
10,518 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
4,023 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.

Post a Comment

Name:
Email Address:
Comment:
Are you a bot?
Submit

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

Write New!
Do you want to publish a tutorial to our support center?

News / Announcements

SSL Certficate Warnings
Updated 2014-04-14 11:34 am EST
Hits: 2002
Heartbleed 0-day OpenSSL security bug
Updated 2014-04-14 04:43 pm EST
Hits: 5274

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

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!