CSS JQuery: Vertical Nav Menu That Scrolls Then Also Has A Fly Out.

<style type="text/css">

* {
margin: 0px;
padding: 0px;
}
a {
color:inherit;
text-decoration: none;
}
#container {
height: 190px;
overflow-y: auto;
}
ul#navmenu a:hover {
color: #FFF;
}
body {
font-size: 15px;
font-family:Verdana;
padding: 50px;
color: #555555;
}
ul#navmenu, ul.sub1, ul.sub2 {
list-style-type: none;
}
ul#navmenu li {
width: 310px;
text-align: center;
position: relative;
border-bottom: 0.12em dotted #ABB0B0;
text-align: left;
}
ul#navmenu a {
text-decoration: none;
display: block;
width: 300px;
height: 45px;
line-height: 45px;
background-color: #E5E8E9;
padding-left: 10px;
}
ul#navmenu .sub1 li {
}
ul#navmenu .su1 a {
margin-top: 5px;
}
ul#navmenu .sub2 a {
margin-left: 10px;
width: 300px;
}
ul#navmenu li:hover > a {
background-color: #0098ba;
}
ul#navmenu li:hover a:hover {
background-color: #0098ba;
}
ul#navmenu ul.sub1 {
display: none;
position: absolute;
top: 45px;
left: 0px;
}
ul#navmenu ul.sub2 {
display: none;
position: absolute;
top: -92px;
left: 300px;
width: 400px;
}
ul#navmenu li:hover .sub1 {
display: block;
}
ul#navmenu .sub1 li:hover .sub2 {
display: block;
}
.sub2 {
text-transform: capitalize;
font-size: 14px;
}
.button {
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
border: solid 1px #c7c7c7;
color: #006792;
cursor: pointer;
-webkit-appearance: button;
box-shadow: inset 0 -1px #c7c7c7;
}
.triangleTop {
position:relative;
left: 270px;
top: 30px;
width: 0;
height: 0;
border-right: 10px solid transparent;
border-bottom: 10px solid #0098ba;
border-left: 10px solid transparent;
z-index: 2;
}

</style>

<body>
<div id="container">
<div class="triangleTop"></div>
<ul id="navmenu">
<li><a>Hover on me</a>

<ul class="sub1">
<li><a href="#">MaHi</a></li>
<li><a href="#">Sonal</a></li>
<li><a href="#">Cities</a>
<ul class="sub2">
<li><a href="#">Surat</a></li>
<li><a href="#">Bhavnagar</a></li>
<li><a href="#">Ahmedabad</a></li>
<li><a href="#">Rajkot</a></li>
<li><a href="#">Baroda</a></li>
<li><a href="#">Navsari</a></li>
<li><a href="#">Valsad</a></li>
<li><a href="#">Baruch</a></li>
<li><a href="#">Mumbai</a></li>
<li><a href="#">Panchgini</a></li>
<li><a href="#">Pune</a></li>
<li><a href="#">Nagpur</a></li>
</ul>
</li>
<li><a href="#">Country</a></li>
<li><a href="#">Sport</a></li>
<li><a href="#">Hobby</a></li>
<li><a href="#">Love</a></li>
<li><a href="#">Man City FC</a></li>
<li><a href="#">Bike</a></li>
<li><a class="button">Manage content collections</a></li>
</ul>
</li>
</ul>
</div>
</body>

Output :)

1)

CSS JQuery

Tuesday, December 9, 2014

Vertical Nav Menu That Scrolls Then Also Has A Fly Out.

No comments:

Post a Comment