Hi there. I'm trying to build a site using a menu with links that expand when clicked if there is a submenu.

I've searched the internet and found a few examples, but they're not quite what I'm looking for. The codes I've found mess up the css I've put on the links. For example, one interfered with my hover effects. Can anyone help?

This is my CSS for the navigation:

#avmenu {
clear:left; float:left;
width:150px; margin:0 0 10px 0;

padding:0;
}

#avmenu ul {
list-style:none;width:150px;

margin:0 0 20px 0;

padding:0;
}

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



#avmenu li a {
font-weight:bold;height:15px;

text-decoration:none;
cursor:crosshair;

color:#92A9F0;
display:block;
padding:6px 0 0 10px;
background:#f4f4f4
x;

border-top:1px solid #cccccc;

border-right:1px solid #cccccc;
border-left:1px solid #cccccc;

border-bottom:1px solid #cccccc;
}

#avmenu li a:hover, #avmenu li a.current {
background:#eaeaea bottom left repeat-x;

color:#505050;

border-top:1px solid #b0b0b0;

border-right:1px solid #b0b0b0;

border-bottom:1px solid #b0b0b0;
border-left:1px solid #d8d8d8;
}

#avmenu ul ul {
margin:5px 0 5px 15px; font-size:0.9em;

width:135px;
}

#avmenu ul ul a {
height:16px;

margin:0;

padding:4px 0 0 8px;
}

#avmenu h2 {
font-size:1.5em;

font-weight:normal;

----------------------------

The HTML:

<div id="avmenu">
<h2 class="hide">Site menu:</h2>
<ul>
<li><a class="current" href="index.php">Home</a></li>
<li><a href="pers.html">Personal Sites</a>
</li>
<ul>
<li>Submenu Link</li>
<li>Submenu Link</li>
</ul>
<li><a href="aff.php?id=affiliates">Affiliates</a></li>
</ul>