Vertikální hover menu

[nevim999]

Potreboval bych na web dát vertikální hover menu asi tohle:
http://interval.cz/clanky/vertikalni-hover-menu/
Ale potřebuju to dát do mého už vytvořeného menu:
CSS:
#avmenu {
clear: left;
float: left;
width: 150px;
margin: 0 0 10px 0;
padding: 0;
font-size: 0.9em;
}

#avmenu ul {
list-style: none;
width: 150px;
margin: 10px 0 20px 0;
padding: 0;
font-size: 1.1em;
}

#avmenu li {
margin-bottom: 4px;
}

#avmenu li a {
font-weight: bold;
height: 20px;
text-decoration: none;
color: #000000;
display: block;
padding: 6px 0 0 10px;
background: #BDB76B;
border-left: 1px #BDB76B solid;
}


#avmenu li a:hover {
background: #DAA520;
color: #fffff1;
border-left: 4px #BDB76B solid;
border-right: 4px #BDB76B solid
}

HTML:
<div id="avmenu">
<h2 class="hide">Menu:</h2>
<ul>

<li><a href="#">Achievementy</a></li>
<li><a href="#">Datadisky</a></li>
<li><a href="#">Eventy</a></li>
<li><a href="#">Frakce</a></li>
<li><a href="#">Historie</a></li>
<li><a href="#">Mapy a Lokace</a></li>
<li><a href="#">Povolání</a></li>
<li><a href="#">Profese</a></li>
<li><a href="#">PVE</a></li>
<li><a href="#">PVP</a></li>
<li><a href="#">Rasy</a></li>
<li><a href="#">Talenty</a></li>
<li><a href="#">Zajímavosti</a></li>
<li><a href="#">Download</a></li>
</ul>

Ale nevim jak to do toho mého menu dát. Nebo poraďte jak tohle moje menu vytvořit, aby když na to najedu tak se vpravo vysune nabídka dalších odkazů.

[d1amond]

Proč vymýšlet vymyšlené:
http://www.cssplay.co.uk/menus/
Vezmi svoje menu položky a napsauj je do hotového řešení. Uprav rozměry a je to.