Simple Vertical CSS Menu

Here is an example of simple Vertical css menu. This menu is fully CSS based no JavaScript and there is no image so it is load very quickly, and it is also search engine friendly.

simple vertical css Menu

CSS:

.menu_div ul
{
	padding:0px;
	margin:0px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:15px;
	color:#FFF;
	list-style:none;
	text-indent:15px;
}
.menu_div ul li
{
	background:#3f3f3f;
	line-height:28px;
        border-bottom:1px solid #333;
}
.menu_div ul li a
{
	text-decoration:none;
	color:#FFF;
	display:block;
}
.menu_div ul li a:hover
{
	background:#d40203;
}
.menu_div ul li#active
{
	background:#d40203;
}

HTML:

<div class="menu_div">
    	<ul>
        <li id="active"><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Service</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Latest News</a></li>
        <li><a href="#">Feedback</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Contact Us</a></li>
        </ul>
</div>

The result looks like this:

simple vertical css Menu

VN:F [1.9.22_1171]
Rating: 9.2/10 (51 votes cast)
VN:F [1.9.22_1171]
Rating: +17 (from 21 votes)
Simple Vertical CSS Menu, 9.2 out of 10 based on 51 ratings

This entry was posted in Advanced HTML - CSS. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>