<div class="wrapper">
 <div class="v-menu">
 <ul>
 <li><a href="">Left menu item one</a></li>
 <li><a href="">Left menu item two</a></li>
 <li class="active"><a href="">Left menu item three</a></li>
 <li><a href="">Left menu item four</a>
 <ul>
 <li><a href="">Submenu item one</a></li>
 <li><a href="">Submenu item two</a></li>
 <li><a href="">Submenu item three</a></li>
 <li><a href="">Submenu item four</a></li>
 <li><a href="">Submenu item five</a></li>
 </ul>
 </li>
 <li><a href="">Left menu item five</a></li>
 <li><a href="">Left menu item six</a>
 <ul>
 <li><a href="">Submenu item one</a></li>
 <li><a href="">Submenu item two</a></li>
 <li><a href="">Submenu item three</a></li>
 <li><a href="">Submenu item four</a></li>
 <li><a href="">Submenu item five</a></li>
 </ul>
 </li>
 <li><a href="">Left menu item seven</a></li>
 <li><a href="">Left menu item eight</a></li>
 <li><a href="">Left menu item nine</a></li>
 <li><a href="">Left menu item ten</a></li>
 </ul>
 </div>
 </div>

* {
 margin: 0;
 padding: 0;
}

body {
 font-family: Tahoma, Verdana;
 font-size: 12px;
 color: #222222;
 line-height: 18px;
 background: #f8f8f8 url("bg.png") repeat;
}

.wrapper {
 padding: 20px;
 width: 984px;
 margin: 0 auto;
}

/*а’аЕб€б‚аИаКаАаЛбŒаНаОаЕ аВб‹аПаАаДаАбŽб‰аЕаЕ аМаЕаНбŽ*/

.v-menu {
 width: 200px;
}

.v-menu ul {
 
}

.v-menu ul li {
 list-style-type: none;
 border: 1px solid #dddddd;
 margin-top: -1px;
 position: relative;
}

.v-menu ul li:first-child,
.v-menu ul li:first-child a {
 border-radius: 4px 4px 0 0;
 -webkit-border-radius: 4px 4px 0 0;
 -moz-border-radius: 4px 4px 0 0;
}

.v-menu ul li:last-child,
.v-menu ul li:last-child a {
 border-radius: 0 0 4px 4px;
 -webkit-border-radius: 0 0 4px 4px;
 -moz-border-radius: 0 0 4px 4px;
}

.v-menu ul li a {
 color: #0095eb;
 text-decoration: none;
 display: block;
 padding: 10px 15px;
 background: white url("arrow-right.png") 178px center no-repeat;
}

.v-menu ul li a:hover {
 background: #f5f5f5 url("arrow-right-hover.png") 178px center no-repeat;
}

.v-menu ul li.active {
 border: none;
 *border-top: 1px solid #0095eb;
}

.v-menu ul li.active+li {
 border-top: none;
}

.v-menu ul li.active a {
 background: #0095eb url("arrow-right-active.png") 178px center no-repeat;
 color: white;
}

.v-menu ul li ul {
 display: none;
}

.v-menu ul li:hover ul {
 display: block;
 position: absolute;
 left: 198px;
 top: 0;
 width: 180px;
}

.v-menu ul li:hover ul li:first-child,
.v-menu ul li:hover ul li:first-child a {
 border-radius: 0 4px 0 0;
 -webkit-border-radius: 0 4px 0 0;
 -moz-border-radius: 0 4px 0 0;
}

.v-menu ul li:hover ul li:last-child {
 border-radius: 0 0 4px 4px;
 -webkit-border-radius: 0 0 4px 4px;
 -moz-border-radius: 0 0 4px 4px;
}

.v-menu ul li:hover ul li a {
 font-size: 11px;
 padding: 10px;
}

Смотреть пример | Скачать архив