Menu With Left and Right Borders

CSS Vertical Menu with left and right border, 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 Menu With Left and Right Borders</title>
</head>
<body>

<div class="menu_simple">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Some link here</a></li>
<li><a href="#">And here</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</div>

</body>
</html>

CSS code:

/* CSSTerm.com CSS menu with left and right borders */

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

.menu_simple ul li a {
    text-decoration: none;
    color: black; 
    padding: 10.5px 11px;
    display:block;
}
 
.menu_simple ul li a:hover, .menu_simple ul li .current {
    color: lime;
    border-style: solid dashed;
    border-width: 0px 5px;
    border-color:lime;
}

Previous page: CSS Menu Easy Vertical

Next page: CSS Menu With Borders