CSS Vertical menu Link Expand

CSS Vertical Menu Link Expand, 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 Link Expand</title>
</head>
<body>

<div class="menu_simple">
<ul>
<li><a href="#">CSS</a></li>
<li><a href="#">Vertical</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Expand</a></li>
</ul>
</div>

</body>
</html>

CSS code:

/* CSSTerm.com CSS Vertical menu Link Expand */

.menu_simple ul {
    margin: 0; 
    padding: 0;
    width:185px;
    list-style-type: none;
}

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

Previous page: CSS Menu With Borders

Next page: CSS Menu Simple Vertical