Home Top Ad

Creating a Dropdown Menu with HTML & CSS

12:56 1 comments
Share:



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 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 now customize the menu and make it your own!





















Labels:











Share:


























             

           






1 commentaire:
















































Inscription à :

Publier les commentaires
                      (
                      Atom
                      )