Simple CSS Drop Down Menu | InMotion Hosting

In this article:

CSS Code for a Drop Menu
HTML Code for a Drop Menu

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.

Share this Article

Need More Help?