Simple Drop-down Menu Using CSS

Drop Down Menu

Simple Drop Down menu using CSS or CSS3 elements. Its a simple and slick design to use in any blog or website or forum etc. just copy the code and HTML elements as mention below.
HTML

Home
Drop-Down 1
    

Sub Menu 1
Sub Menu 2
Sub Menu 3


Drop-Down 2
    

Sub Menu 1
Sub Menu 2
Sub Menu 3


Contact Us

CSS

#menu{  
 background: #369;  
 height: 50px;  
 position: relative;  
 margin: 0;  
 padding: 0;  
 list-style: none;  
 min-width: 500px;  
}  
#menu > li{  
 float: left;  
 border-left: 1px solid #379;  
 border-right: 1px solid #359;  
 background: #369;  
}  
#menu li a{  
 display: block;  
 padding: 10px;  
 text-decoration: none;  
 font: 16px/30px Roboto, verdana, arial;  
 color: white;  
}  
#menu li ul{  
 position: absolute;  
 top: 80px;  
 margin: 0;  
 padding: 0;  
 width: 150px;
 visibility: hidden;
 border-top: none; 
 list-style: none;
 background: white;  
 white-space: nowrap;  
 box-shadow: 0 2px 3px rgba(0,0,0,0.3); 
 transition: all 0.2s ease-in;
}  
#menu li:hover ul{  
 top: 50px;
 visibility: visible;
}  
#menu li:hover a{  
 background: white;  
 color: #369;  
 transition: all 0.2s ease-in-out;
}  
#menu li:hover ul li {  
 color: #369;  
 display: block;  
 width: 100%;  
}  
#menu li:hover ul li a:hover{  
 background: rgb(230,230,230);
}  

See the Pen Simple CSS Drop Down Menu by Virender (@vkmr83) on CodePen.

You can customize this menu navigation to your own design or use it as it is. Share and support my work.

View