Simple css dropdown menu

Create a simple and smooth css dropdown menu with pure css. No javascript required at all. The output of the given code is...

The Css

  <style type="text/css">
    body, div, ul, li {
      margin: 0;
      padding: 0;
     }
    body {
     font-family: Tahoma, Geneva, sans-serif;
     font-size: 0.75em;
     width: 960px;
     margin: 0 auto;
     padding: 10px;
     background-color: #006666;
    }
     a {
      text-decoration: none;
     }
     ul {
      list-style: none;
     }
     #nav {
      list-style: none;
      font-weight: bold;
      margin-bottom: 10px;
      float: left;
      width: 100%;
      background-color: #d03543;
      line-height: 20px;
      position:relative;
      z-index:100;
     }
     #nav li {
      float: left;
      margin: 0 15px 0 10px;
      position: relative;
     }
     #nav a {
      display: block;
      padding: 7px;
      color: #ffffff;
     }
     #nav a:hover {
      background: #3f3f3f;
     }
     #nav ul {
      background: rgba(255,255,255,0);
      position: absolute;
      left: -9999px;
     }
     #nav ul li {
      padding-top: 1px;
      float: none;
     }
     #nav ul a {
      white-space: nowrap;
     }
     #nav li:hover ul {
      left: 0;
     }
     #nav li:hover a {
      background: #3f3f3f;
     }
     #nav li:hover ul li a:hover {
      background: #333333;
     }
  </style>


The Html
    
   <html>
    <body>
    <ul id="nav">
      <li> <a href="#">Home</a> </li>
      <li> <a href="#">About us &#x25BC;</a>
        <ul>
          <li><a href="#">Who we are</a></li>
          <li><a href="#">What we do</a></li>
        </ul>
      </li>
      <li> <a href="#">Products &#x25BC;</a>
        <ul>
          <li><a href="#">Mobile phones</a></li>
          <li><a href="#">Tablets</a></li>
          <li><a href="#">Laptop accessories</a></li>
        </ul>
      </li>
      <li> <a href="#">Contact us</a> </li>
    </ul>
    </body>
   </html>

Simple css dropdown menu Simple css dropdown menu Reviewed by JS Pixels on October 19, 2012 Rating: 5

No comments:

Altaf Web. Powered by Blogger.