auklappbares menü mit css/java-script

[crazylady]

Hallo!!

mache derzeit mein abschlussprojekt (eine homepage) für die schule und hänge bei der navigation!

mal generell zur Seite:
die gesamte page ist mit asp geschrieben (also eine dynamische website); css ist einer eigenen datei; navi ist auch eigene datei (mittels server-include eingebaut)

das ding sollte aufklappbare unterpunkte haben, was bei mir nicht so richtig funktioniert!! script hab ich von hier: http://webmatze.de/webdesign/javascript/showhidenav.htm

hier mal meine version:


java-script im head:

Code:

<script language="JavaScript">
    function showhide(sub1) {
        var e = document.getElementById(sub1);
        e.style.display = (e.style.display == 'block') ? 'none' : 'block';
    }
  </script>

Navigation (wobei das zwischen den komentaren in einer eigenen datei steht

Code:

<div class="navi"><!--Navigation-->

  <a href="news.asp">News</a>
    <a href="about.asp">Wir über uns</a>
    <a href="chronik.asp">Chronik</a>
    <a href="referenzen.asp">Referenzen</a>
    <a href="#"OnClick="showhide('sub1');">Tätigkeitsbereiche</a>
     <div class="um" id="sub1" style="display:none;">
     <a href="floristik.asp">Florikstik</a>
     <a href="garten.asp">Gartengestaltung</a>
     <a href="innen.asp">Innenraumbegrünung</a>
     <a href="dienst.asp">Dienstleistungen</a>
       </div>
    <a href="galerie.asp">Galerie</a>
    <a href="kontakt.asp">Kontakt</a>
    <a href="anfahrt.asp">Anfahrt</a>
    <a href="impressum.asp">Impressum</a>
    
<!--Navigation ende--></div>

und ausschnitt aus der css-datei:

Code:

div.navi {
    float: left;
    width: 150px;
    height: auto;
    font-weight:bold;
    margin-top: 40px;
    margin-left: 15px;
    margin-bottom: 20px;
    }

div.navi a {
    display: block;
    background-image: url(../images/nav-normal.gif);
    padding-left: 3px;
    padding-bottom: 2px;
    padding-top: 2px;
    border: 1px;
    border-style: solid;
    border-color:#006600;
    margin-bottom: 1px;
    }
        
div.navi a:hover{
    display: block;
    background-image: url(../images/nav-hover.gif);
    padding-bottom: 2px;
    padding-top: 2px;
    padding-left: 3px;
    border: 1px;
    border-style: solid;
    border-color:#006600;
    margin-bottom: 1px;
    vertical-align: middle;
    }
    
div.um {
    margin-left 10px;
    }

div.um a {
    padding-bottom: 2px;
    padding-top: 2px;
    padding-left: 3px;
    background-image: none;
    
    }

wäre möglich, dass irgndwo ein "blöder" fehler drinn steckt den ich nicht finde...

hoffe, mir kann jemand helfen! danke schonmal!

lg