Create simple single level drop-down menu with css without jquery

This is very simple tutorial as i mentioned in the heading of this tutorial. In this tutorial i have created very simple drop-down menu with only html and css.I am not using any using any jquery or javascript for this.

If you are beginner and want to create some website from scratch then i think you should use this code for your website. In this tutorial i have used bootstrap classes. If you want to learn bootstrap then follow this link.

Learn Bootstrap from scratch

1. Create HTML code for drop down menu.

 
  
  
  
 
 
  

   

    

Home
About
Services
      

Sub Menu 1
Sub Menu 2
Sub Menu 3
Sub Menu 4
Sub Menu 5
Sub Menu 6
Sub Menu 7


Blog
Contact
Social
      

Sub Menu 1
Sub Menu 2
Sub Menu 3
Sub Menu 4
Sub Menu 5
Sub Menu 6
Sub Menu 7

Create Css Code for this

#menuBar{
 background: #666;
 margin-top: 20px;
 border-radius:2px;
}

#menuBar ul{
 margin: 0px;
 padding: 0px;
}

#menuBar ul li{
 display: inline-block;
}

#menuBar ul li a{
 display: block;
 padding: 10px 15px;
 color: #fff;
 text-decoration: none;
 font-size: 18px;
}

#menuBar ul li a:hover{
 background: #333;
}

#menuBar ul li ul{
 position: absolute;
 display: none;
 background: #666;
 border-top:2px solid #000;
}

#menuBar ul li ul li{
 display: block;
}

#menuBar ul li:hover ul{
 display: block;
}

Categories: css, html