CSS Menu with Description

CSS Vertical Menu with description, compatible with all major browsers, no images or javascript.

Demo:

How to use:

Open text editor like Notepad or any other.
Copy HTML code and paste into the text editor.
Save file as anyname.html or anyname.htm
Create new document.
Copy and paste CSS code into text editor.
Save file as menu.css

HTML code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="menu.css" />
<title>CSS Vertical Menu with description</title>
</head>
<body>

<div class="menu_simple">
<ul>
<li><a href="#">Home<span class="small">Home Page</span></a></li>
<li><a href="#">About Us<span class="small">Read more about us</span></a></li>
<li><a href="#">Products<span class="small">Check Products</span></a></li>
<li><a href="#">Information<span class="small">Some Information</span></a></li>
<li><a href="#">Contact Us<span class="small">Have questions?</span></a></li>
</ul>
</div>

</body>
</html>

CSS code:

/* CSSTerm.com CSS Vertical menu with description */

.menu_simple ul {
    margin: 0; 
    padding: 0;
    width:205px;
    list-style-type: none;
    text-align:center;
}

.menu_simple ul li a {
    text-decoration: none;
    color: red; 
    padding: 10.5px 11px;
    display:block;
    font-weight:bold;
}
 
.menu_simple ul li a:hover, .menu_simple ul li .current {
    color: black;
}

.small {
	color: #666666;
	display:block;
	font-size:11px;
	padding: 0px 30px;
	font-weight:normal;
	text-transform:uppercase;
}

Previous page: CSS Menu Simple Vertical

Next page: CSS Menu Flyout Left