Simple DropDown Menu Example For Beginners
I explained here simple DropDown Menu, it is easy to understand and develop for beginners. Here I used less and simple CSS Properties.
In before article I explained simple Menu Navigation, now I added DropDown Menu here.
Simple Menu Navigation
CSS Styles:
<style>
ul.menu_nav{
width: 660px; /*menu navigation width*/
background: #bbb;
border: 2px solid #999;
border-radius:5px;
}
ul.menu_nav li{
display:inline;
list-style: none;
position: relative;
}
ul.menu_nav li a{
text-decoration: none;
color: #FFF;
font-family: 'Segoe UI',Arial,sans-serif;
font-size: 16px;
font-weight: bold;
padding: 10px 15px;
display: inline-block;
}
ul.menu_nav a:hover{
background: #999;
color: #8fde62;
}
/*this below CSS Styles for drop down menu */
ul.menu_nav li ul,ul.menu_nav ul{
visibility: hidden;
opacity:0;
list-style: none;
position: absolute;
background: #666666;
left: 0;
margin: 0px;
padding: 0px;
border-radius:5px;
}
ul.menu_nav ul li{
clear: both;
width: 100%;
height: 0px;
padding: 0px;
}
ul.menu_nav ul li a{
clear: both;
display:inline-block;
width:100px;
}
ul.menu_nav li:hover>ul{
visibility: visible;
opacity:1;
}
ul.menu_nav ul li a:hover{
background: #333333;
}
</style>
HTML File:
<ul class="menu_nav">
<li><a href="">Home</a></li>
<li><a href="">Materials</a>
<ul>
<li> <a href="">Groups</a></li>
<li> <a href="">Civil</a></li>
<li> <a href="">Bank Clerk/PO's</a></li>
<li> <a href="">RRB</a></li>
</ul>
</li>
<li><a href="">Notifications</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Contact Us</a></li>
</ul>
No comments:
Post a Comment