CSS3 Drop down sub-menu:
<style>
.ddmenu{
margin: 0px auto;
height: 40px;
width: 600px;
background: #09907e;
background: -webkit-linear-gradient(top,#09907e 0%,#033831 100%);
background: -moz-linear-gradient(top,#09907e 0%,#033831 100%);
background: -o-webkit-linear-gradient(top,#09907e 0%,#033831 100%);
background:linear-gradient(top,#09907e 0%,#033831 100%);
background: -ms-webkit-linear-gradient(top,#09907e 0%,#033831 100%);
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
}
.ddmenu li{
position: relative;
list-style: none;
display: block;
float: left;
}
.ddmenu li a{
padding: 10px 20px;
text-decoration: none;
font-family: 'Arial';
font-size: 13px;
font-weight: bold;
color: #FFF;
border-right: 1px solid #04584e;
line-height: 35px;
}
.ddmenu li a:hover{
text-shadow:0px 0px 3px #FFF;
}
.ddmenu li a.lastbutton{
border-right:none;
}
.ddmenu ul{
position: absolute;
visibility: hidden;
list-style: none;
left: 0;
margin: 0px;
padding:0px;
opacity:0px;
background: #033831;
transition: opacity .20s ease .1s;
-moz-transition: opacity .20s ease .1s;
-o-transition: opacity .20s ease .1s;
-ms-transition: opacity .20s ease .1s;
-webkit-transition: opacity .20s ease .1s;
}
.ddmenu li:hover>ul{
visibility: visible;
opacity:1;
}
.ddmenu ul li{
height: 0;
overflow: hidden;
padding: 0;
-webkit-transition: height .20s ease .1s;
-moz-transition: height .20s ease .1s;
-o-transition: height .20s ease .1s;
-ms-transition: height .20s ease .1s;
transition: height .20s ease .1s;
}
.ddmenu li:hover>ul li{
height: 40px;
overflow: visible;
padding: 0;
}
.ddmenu ul li a{
width: 140px;
border-bottom: 1px solid #022e28;
border-right: none;
display: inline-block;
clear: both;
margin:0px;
padding: 2px 0 2px 10px;
}
.ddmenu ul li a.lastddbutton{
border-bottom: none;
}
.ddmenu ul li ul{
list-style:none;
display: inline-block;
margin-left: 150px;
background: #04584e;
}
</style>
<ul class="ddmenu">
<li><a href="">Home</a></li>
<li><a href="">Materials<img src="down.gif" class="down"/></a>
<ul>
<li><a href="">Groups</a></li>
<li><a href="">Civil >></a>
<ul>
<li><a href="">Mock Test</a></li>
<li><a href="">Notifications</a></li>
<li><a href="">Guide Articles</a></li>
<li><a href="">Online Exam</a></li>
<li><a href=""class="lastddbutton">Notes</a></li>
</ul>
</li>
<li><a href="">Bank Clerk/PO's</a></li>
<li><a href=""class="lastddbutton">RRB</a></li>
</ul>
</li>
<li><a href="">Notifications<img src="down.gif" class="down"/></a>
<ul>
<li><a href="">Exam Reminder</a></li>
<li><a href="">Notifications</a></li>
<li><a href=""class="lastddbutton">Guide Articles</a></li>
</ul>
</li>
<li><a href="">About Us</a></li>
<li><a href=""class="lastbutton">Contact Us</a></li>
</ul>
No comments:
Post a Comment