Showing posts with label drop. Show all posts
Showing posts with label drop. Show all posts
Sunday, May 7, 2017
Simple Drop down Menu Using CSS
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
HTML
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
Available link for download
Subscribe to:
Posts (Atom)