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.

  Create single level custom drop-down menu with css

Create Css Code for this
 background: #666;
 margin-top: 20px;

#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: ,



Web Hosting