Post
Ask Question

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:

  1. <ul id='menu'>    
  2.    <li><a href='#'>Home</a>    
  3.      <ul>    
  4.          <li><a href='#'>Menu1</a></li>    
  5.          <li><a href='#'>Menu2</a></li>    
  6.          <li><a href='#'>Menu3</a></li>    
  7.      </ul>    
  8.    </li>    
  9.    <li><a href='#'>About Us</a>    
  10.      <ul>    
  11.          <li><a href='#'>Menu1</a></li>    
  12.          <li><a href='#'>Menu2</a></li>    
  13.          <li><a href='#'>Menu3</a></li>    
  14.      </ul>    
  15.    </li>    
  16.    <li><a href='#'>Contact Us</a>    
  17.      <ul>    
  18.          <li><a href='#'>Menu1</a></li>    
  19.          <li><a href='#'>Menu2</a></li>    
  20.          <li><a href='#'>Menu3</a></li>    
  21.      </ul>    
  22.    </li>    
  23. </ul>   
Now Add this CSS to Your CSS file :
  1. ul {     
  2.     padding:0;     
  3.     margin:0    
  4. }    
  5. a {    
  6.     display:block;    
  7.     text-decoration: none;    
  8. }    
  9. li {    
  10.     display:block;     
  11.     float:left;    
  12. }    
  13. li ul li {    
  14.     float:none;    
  15. }    
  16. li ul {    
  17.     display:none;     
  18.     position:absolute;     
  19.     z-index:1    
  20. }    
  21. li:hover ul {    
  22.     display:block;    
  23. }    
  24.     
  25. /*DROPDOWN STYLING:*/    
  26. #menu {    
  27.     height:30px    
  28. }    
  29. #menu a {    
  30.     color:#024E67;     
  31.     padding:10px 15px 10px 15px;    
  32. }    
  33. #menu a:hover {    
  34.     color:#ffffff;    
  35. }    
  36. #menu li {    
  37.     background-color:#FFF;     
  38.     border:solid 1px #CCC;      
  39.     margin-left:-1px    
  40. }    
  41. #menu li:hover {    
  42.     background-color:#0072BA    
  43. }  
This CSS Give The same output as other JavaScript can give and we also give style in it.