This Vertical
Drop down Menu bar Create Using Simple HTML and CSS. This menu looks simple and
Professional.
Demo Download
HTML Markup:
<div class='menu'>
<ul>
<li>
<a href='#'>Home</a>
</li>
<li class='active
has-sub'>
<a href='#'>Tutorials</a>
<ul>
<li class='has-sub'>
<a href='#'>HTML</a>
</li>
<li class='has-sub'>
<a href='#'>CSS</a>
</li>
<li class='has-sub'>
<a href='#'>jQuery</a>
</li>
</ul>
</li>
<li>
<a href='#'>Demos</a>
</li>
<li class='last'>
<a href='#'>Downloads</a>
</li>
</ul>
</div>CSSS
.menu, .menu ul, .menu ul li, .menu ul ul {
list-style: none;
margin: 0;
padding: 0;
border: 0;
}
.menu ul {
position: relative;
z-index: 597;
float: left;
}
.menu ul li {
float: left;
min-height: 1px;
line-height: 1em;
vertical-align: middle;
}
.menu ul li.hover, .menu ul li:hover {
position: relative;
z-index: 599;
cursor: default;
}
.menu ul ul {
margin-top: 1px;
visibility: hidden;
position: absolute;
top: 1px;
left: 99%;
z-index: 598;
width: 100%;
}
.menu ul ul li {
float: none;
}
.menu ul ul ul {
top: 1px;
left: 99%;
}
.menu ul li:hover > ul {
visibility: visible;
}
.menu ul li {
float: none;
}
.menu ul ul li {
font-weight: normal;
}
/* Custom CSS */
.menu {
font-family: 'Lato', sans-serif;
font-size: 18px;
width: 200px;
}
.menu ul a, .menu ul a:link, .menu ul a:visited {
display: block;
color: #848889;
text-decoration: none;
font-weight: 300;
}
.menu > ul {
float: none;
}
.menu ul {
background: #fff;
}
.menu > ul > li {
border-left: 3px solid #d7d8da;
}
.menu > ul > li > a {
padding: 10px 20px;
}
.menu > ul > li:hover {
border-left: 3px solid #3dbd99;
}
.menu ul li:hover > a {
color: #3dbd99;
}
.menu > ul > li:hover {
background: #f6f6f6;
}
/* Sub Menu CSS
*/
.menu ul ul a:link, .menu ul ul a:visited {
font-weight: 400;
font-size: 14px;
}
.menu ul ul {
width: 180px;
background: none;
border-left: 20px solid transparent;
}
.menu ul ul a {
padding: 8px 0;
border-bottom: 1px solid #eeeeee;
}
.menu ul ul li {
padding: 0 20px;
background: #fff;
}
.menu ul ul li:last-child {
border-bottom: 3px solid #d7d8da;
padding-bottom: 10px;
}
.menu ul ul li:first-child {
padding-top: 10px;
}
.menu ul ul li:last-child
> a {
border-bottom: none;
}
.menu ul ul li:first-child:after
{
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: -20px;
top: 13px;
border-left: 10px solid transparent;
border-right: 10px solid #fff;
border-bottom: 10px solid transparent;
border-top: 10px solid transparent;
}
No comments :
Post a Comment