13Styles Menu Design

Example

• Home
• Articles
• Topics
• Forum
• Blog
• Subscribe
• Contact Us

ul.vert-one{margin:0;padding:0;list-style-type:none;display:block;
font:bold 16px Helvetica, Verdana, Arial, sans-serif;line-height:165%;
width:200px;}

ul.vert-one li{margin:0;padding:0;border-top:1px solid #4D0000;
border-bottom:1px solid #761A1A;}

ul.vert-one li a{display:block;text-decoration:none;color:#fff;
background:#600;padding:0 0 0 20px;width:180px;}

ul.vert-one li a:hover{
background:#900 url("images/vert-one_arrow.gif") no-repeat 0 9px;}

ul.vert-one li a.current,ul.vert-one li a.current:hover{
background:#933 url("images/vert-one_arrow.gif") no-repeat 0 9px;}

<ul class="vert-one">
  <li><a href="#" title="CSS Menus">Home</a></li>
  <li><a href="#" title="CSS Menus">Articles</a></li>
  <li><a href="#" title="CSS Menus" class="current">Topics</a></li>
  <li><a href="#" title="CSS Menus">Forum</a></li>
  <li><a href="#" title="CSS Menus">Blog</a></li>
  <li><a href="#" title="CSS Menus">Subscribe</a></li>
  <li><a href="#" title="CSS Menus">Contact Us</a></li>
</ul>

1. vert-one_arrow.gif