DropDown Menu In HTML without JavaScript

To Create dropdown menu in html without JavaScript and JQuery the below code is useful to create it .

HTML Code:

<ul id='menu'>
   <li><a href='#'>Home</a>
     <ul>
         <li><a href='#'>Menu1</a></li>
         <li><a href='#'>Menu2</a></li>
         <li><a href='#'>Menu3</a></li>
     </ul>
   </li>
   <li><a href='#'>About Us</a>
     <ul>
         <li><a href='#'>Menu1</a></li>
         <li><a href='#'>Menu2</a></li>
         <li><a href='#'>Menu3</a></li>
     </ul>
   </li>
   <li><a href='#'>Contact Us</a>
     <ul>
         <li><a href='#'>Menu1</a></li>
         <li><a href='#'>Menu2</a></li>
         <li><a href='#'>Menu3</a></li>
     </ul>
   </li>
</ul>

Now Add this CSS to Your CSS file :

ul {
    padding:0;
    margin:0
}
a {
    display:block;
    text-decoration: none;
}
li {
    display:block;
    float:left;
}
li ul li {
    float:none;
}
li ul {
    display:none;
    position:absolute;
    z-index:1
}
li:hover ul {
    display:block;
}

/*DROPDOWN STYLING:*/
#menu {
    height:30px
}
#menu a {
    color:#024E67;
    padding:10px 15px 10px 15px;
}
#menu a:hover {
    color:#ffffff;
}
#menu li {
    background-color:#FFF;
    border:solid 1px #CCC;
    margin-left:-1px
}
#menu li:hover {
    background-color:#0072BA
}

This CSS Give The same output as other JavaScript can give and we also give style in it.