mehrere Coolmenus

Hallo Freunde kann ich mehrere Coolmenues machen ???

Hab einen schon, jedoch moechte ich noch einen, den ich dann auf einer anderen Stelle platziere. Habe versucht einfach zweimal den Code einzufuegen und den Namen einfach zu aendern, jedoch hat es nicht geklappt an stelle eines weiteres menues wurde der andere einfach veraendert.
bitte um hilfe

code:

<style type="text/css" media="screen">
<!--
/* Allgemeine Einstellungen (Schriftart, Schriftgröße...) */
body {
font-family: Verdana, sans-serif;
font-size: 12px!important;
overflow: auto;
margin: 0px; }

/* keine Auflistungspunkte vor Navi-Links */
ul, li {
list-style-type: none;
padding: 0px;
margin: 0px; }

/* Abstand zwischen Schrift zum Rand */
li a {
padding-left: 1px;
padding-right: 1px;
padding-top: 0px; }

/* Coolmenü positionieren, Werte bei "top" , "left" und "width" anpassen */
div.menu {
position: absolute;
z-index: 3;
top: 248px;
left: 33%;
right: 33%;
margin-left:0px;
width:700px; }

/* Breite der Menüpunkte einstellen */
.menu li {
width: 100px;
float: left; }

/* Aussehen der Menüpunkte einstellen */
.menu a {
border: 0px solid #000000;
background-color: #FFFFFF;
background-image: url (URL);
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: pointer;
margin: 0px;
display: block;
height: 14px;
color: #000000; }

/* Aussehen der Menüpunkte beim Hover Effekt */
.menu a:hover {
background-color: #CCCCCC;
background-image: url(URL);
color: #000000; }

#smenu1, #smenu2, #smenu3, {
font-size: 15px;
display: none;
width: 25px;
float: left; }

#smenu1 a, #smenu2 a, #smenu3 a, , {
font-weight: bold;
padding-top: 5px;
border-top: 1px;
cursor: pointer;
color: #FFFFFF; }
//-->
</style>

<!-- Anfang des Scriptes -->
<script type="text/javascript">
<!--
function montre(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'block';
else if (all)
all[id].style.display = 'block';
else
layers[id].display = 'block';
}
}
function cache(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'none';
else if (all)
all[id].style.display = 'none';
else
layers[id].display = 'none';
}
}
//-->
</script>
<!-- Ende des Scriptes -->

<div class="menu">

<li><a
href="http://fc-huchting.de.tl/Herren.htm"
>Herren</a></li>

<li><a
href="http://fc-huchting.de.tl/Damen.htm"
>Damen</a></li>

<li><a
href=" http://fc-huchting.de.tl/Junioren.htm"
>Junioren</a></li>
<li><a
href=" http://fc-huchting.de.tl/Juniorinnen.htm"
>Juniorinnen</a></li>

</ul>
</li>
</div>

An der Stelle an der du das zweite Menue haben möchtest musst du diesen Codeteil nochmal einfügen (und die Links entsprechend abändern):

______________
Rechtschreibfehler sind gewollt und erhöhen die Qualität des Beitrags.