Saturday, 27 July 2013

CSS DROP MENU


Written By:-Avinash Malhotra
Our Website:- Tech Altum

Today we are going to create a CSS DROP MENU

Write following code in body tag
  1. Create a div with class nav.
  2. Create a ul inside.
  3. Create four li inside.
  4. In second li, create another ul.
  5. In the new ul, create three li's
On your editor, he following code will look like,
<div class="nav">
  <ul>
     <li><a>Home</a></li>
     <li><a>Training</a>
           <ul>
                 <li><a>Web Designing </a></li>
                <li><a>Asp.net</a></li>
               <li><a>Java</a></li>
          </ul> 
     </li>
     <li><a>Carrer</a></li>
     <li><a>Contact Us</a></li>
  </ul>
</div>

Here is how this will look in browser,

Now Start write CSS.
 > is direct chid selector, means direct child of .nav will be called, not grand child.
  1. *{ margin:0px; padding:0px}
  2. .nav{ width:800px; height:200px; background:gray;}
  3. ul{ list-style:none;}
  4. .nav > ul{ position:absolute}
  5. .nav > ul > li{ width:150px; height:50px; background:black; text-align:center; line-height:35px}
  6. a{ color:white}
  7. .nav > ul > li:hover{ background:#ccc; color:black}
  8.  .nav > ul > li > ul{ display:none}
  9. .nav > ul > li:hover > ul{ display:block}
  10. .nav > ul > li > ul > li{ width:150px; height:50px; background:red; }
Post a Comment