I explained here dropdown menu example, here I added some more CSS properties then previous dropdown menu.(click here to see)
I used simple and less CSS properties same as previous examples. I am posting this example materials for beginners, I hope they can learn easily by using this examples.
CSS Properties:
<style>
ul.menu_nav{
width: 660px; /*menu navigation width*/
border: 2px solid #999;
border-radius:5px;
background: linear-gradient(left,orangered 10%,#FFF 50%,green 110%);
background: -moz-linear-gradient(left,orangered 10%,#FFF 50%,green 110%);/*mozilla firefox*/
background: -webkit-linear-gradient(left,orangered 10%,#FFF 50%,green 110%);/*googlechrome*/
background: -o-linear-gradient(left,orangered 10%,#FFF 50%,green 110%);/*opera*/
background: -ms-linear-gradient(left,orangered 10%,#FFF 50%,green 110%);/*ie*/
}
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;
}
/*drop down menu styles*/
ul.menu_nav li ul,ul.menu_nav ul{
visibility: hidden;
opacity:0;
list-style: none;
position: absolute;
background: #FFF;
left: 0;
margin: 0px;
padding: 0px;
border-radius:5px;
box-shadow:0px 5px 5px 5px #e3e2e2;
}
/* dropdown box tail (it indicates that dropdown box belongs to main menu button)*/
ul.menu_nav ul:before{
content: "";
position: absolute;
bottom: 100%;
left: 26px;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
border-bottom: 15px solid #FFF;
}
ul.menu_nav ul li{
clear: both;
width: 100%;
padding: 0px;
background: #FFF;
border: 0px none;
}
ul.menu_nav ul li a{
clear: both;
display:inline-block;
width:120px;
font-family: 'Segoe UI',Arial,sans-serif;
font-size: 14px;
color: #6a6868;
border: 0px none;
}
ul.menu_nav li:hover>ul{
visibility: visible;
opacity:1;
}
/* dropdown box first and last buttons margin size – it shows the gap between buttons and box top, bottom borders */
ul.menu_nav ul li a.first{
margin-top: 5px;
}
ul.menu_nav ul li a.last{
margin-bottom: 5px;
}
ul.menu_nav ul li a:hover{
background-color: #0081C2;
}
/* dropdown image – it indicates that main button having sub buttons*/
.down{
width: 10px;
height: 5px;
margin-left: 3px;
}
</style>
HTML File:
<ul class="menu_nav">
<li><a href="">Home</a></li>
<li><a href="">Materials<img src="down.gif" class="down"/></a>
<ul>
<li><a href=""class="first">Groups</a></li>
<li><a href="">Civil</a></li>
<li><a href="">Bank Clerk/PO's</a></li>
<li><a href=""class="last">RRB</a></li>
</ul>
</li>
<li><a href="">Notifications<img src="down.gif" class="down"/></a>
<ul>
<li><a href=""class="first">Exam Reminder</a></li>
<li><a href="">Notifications</a></li>
<li><a href=""class="last">Guide Articles</a></li>
</ul>
</li>
<li><a href="">About Us</a></li>
<li><a href="">Contact Us</a></li>
</ul>
