CSS DROP MENU

Written By:-Avinash Malhotra

Our Website:- Tech Altum

• Home
• Training
  • Web Designing
  • Asp.net
  • Java
• Carrer
• Contact Us

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,

• Home
• Training
  • Web Designing
  • Asp.net
  • Java
• Carrer
• Contact Us

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; }