This CSS list menu features category headers with beautiful dotted border, UL elements that have their default margins and padding removed, and finally, LI elements with hover / mouse over glass color. Also current tag highlights the current section or link of your website. The result is something simple but elegant. This menu looks like google's navigation menu.
Demo:
The CSS:
<style type="text/css">
.navbar {
border: 2px dotted #FFFFFF;
padding: 8px 0 8px 14px;
background: #000000;
margin: 0 0 12px 0;
color: #FFFFFF;
}
.navbar a {
color: #FFFFFF;
}
#navmenu {
font-family: arial,sans-serif;
background: #FFFFFF;
font-size: 13px;
width: 180px;
padding: 0;
}
#navmenu ul{
margin: 0 0 8px 0;
list-style: none;
padding: 0;
}
#navmenu ul li a {
padding: 6px 0 6px 16px;
text-decoration: none;
display: block;
color: #222;
}
#navmenu ul li a:visited {
color: #222;
}
#navmenu ul li a:hover {
text-decoration: none;
background: #eee;
color: #222;
}
#navmenu #current a {
border-left: 5px solid #dd4b39;
padding: 6px 0 6px 11px;
color: #dd4b39;
}
</style>The HTML:
<div id="navmenu"> <div class="navbar">WebHQ Pages</div> <ul> <li id="current"><a href="http://webhq.blogspot.com/">Back To Home</a></li> <li><a href="http://webhq.blogspot.com/p/windows-hq.html">Windows Downloads</a></li> <li><a href="http://webhq.blogspot.com/p/mobile-hq.html">Mobile Contents</a></li> <li><a href="http://peacehq.blogspot.com">Way To Peace</a></li> <li><a href="http://webhq.blogspot.com/p/about.html">About The Designer</a></li> </ul> </div>
No comments On "Arrow Bullet List Menu - Vertical CSS Menus"
Post a Comment