CSS Menu With Borders

CSS Vertical Menu with 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 Border</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 Vertical menu with border */

.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: fuchsia;
    border:1px #66FF33 dashed;
}

Previous page: CSS Menu With Left and Right Borders

Next page: CSS Vertical menu Link Expand