Zum Inhalt springen

DropDown Menü - Probleme

Erstellt am 7. November 2008 · Noch keine Antworten

Tags: Frage

Sebastian S.​ ·

Hallo,

leider komm ich mit meinen DropDown-Menü nicht klar...

habe eine HTML Templatedatei erstellt:

im head:

<script type="text/javascript">
    //<![CDATA[
        function show(element){
            element.className += "hover";
        }
        function hide(element){
            element.className = element.className = "";
        }
    //]]>
    </script>

im template:

<!-- ANFANG NAVI -->
            <div id="navi">
                <ul class="navigation">
                    <li><a href="#">Startseite</a></li>
                    <li onmouseover="show(this)" onmouseout="hide(this)">
                        <a href="#" class="active">tester</a>
                        <ul onmouseover="show(this)" onmouseout="hide(this)">
                          <li><a href="#">Ebene2 Punkt1</a></li>
                          <li><a href="#">Ebene2 Punkt2</a></li>
                          <li><a href="#">Ebene2 Punkt3</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Forum</a></li>
                    <li><a href="#">Team</a></li>
                    <li><a href="#">Partner</a></li>
                    <li><a href="#">Impressum</a></li>
                </ul>
            </div>

navi css:

#navi {
    position:absolute;
    margin: 0px;
    margin-top: 94px;
    margin-left: 100px;
    padding: 0px;
    height: 21px;
    }

ul.navigation, ul.navigation ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

ul.navigation a {
    display: block;
    margin: 0px 0px 0px 0px;
    padding: 5px 12px 4px 12px;
    font-family: Verdana;
    font-size: 11px;
    font-weight: bold;
    color: #f0f0f0;
    text-decoration: none;
    border-left: 5px #3a3a45 solid;
}

ul.navigation a:hover {
    margin: 0px 0px 0px 0px;
    padding: 5px 12px 4px 12px;
    font-family: Verdana;
    font-size: 11px;
    font-weight: bold;
    color: #6b6b74;
    text-decoration: none;
    }

ul.navigation a.active {
    color: #6b6b74;
}

ul.navigation ul a {
    margin: 0px;
    padding: 0px;
}

ul.navigation li {
    margin: 0px;
    padding: 0px;
    background-image: none;
    float:left;
    border: 0px;
}
    ul.navigation ul {
    margin-left:0;
    padding: 0 0 5px 0;
    position: absolute;
    background-color: #3a3a45;
    border-left:1px solid #6b6b73;
    border-right:1px solid #6b6b73;
    border-bottom:1px solid #6b6b73;
    display:none;
    min-width: 150px;
}

/* IE-Hack für die Breite */
*html ul.navigation ul {
    width: 150px;
}

/* Dies sind die Klassenstile für das Untermenü wenn sich die Maus */
/* über der Liste  befindet (.hover siehe JavaScript oben) */
ul.navigation ul.hover, ul.navigation li.hover ul, ul.navigation li:hover ul  {
    display:block;
}

ul.navigation ul li {
    float:none;
    background-color: transparent;
}

ul.navigation ul li a {
    margin: 0px 0px 0px 0px;
    padding: 5px 0px 4px 3px;
    font-family: Verdana;
    font-size: 10px;
    font-weight: normal;
    color: #f0f0f0;
    text-decoration: none;
}

ul.navigation ul li a:hover {
    margin: 0px 0px 0px 0px;
    padding: 5px 0px 4px 3px;
    font-family: Verdana;
    font-size: 10px;
    font-weight: normal;
    color: #6b6b74;
    text-decoration: none;
}

in meinen xhtml-Template funktioniert alles super!

doch bau ich das navi in mein typo3 ein, funktioniert es nicht...

navi typo3:

# ---------------------
# MainNavi
# ---------------------

temp.menu = HMENU
temp.menu {
  ### Erste Ebene ###
    1 = TMENU
    1 {
      wrap = <ul class="navigation">|</ul>
      noBlur = 1
      expAll = 1
      #NO.wrapItemAndSub = <li onmouseover="show(this)" onmouseout="hide(this)">|</li>
      NO.wrapItemAndSub = <li>|</li> || <li onmouseover="show(this)" onmouseout="hide(this)">|</li> |*| <li>|</li>

      ACT < .NO
      ACT = 1
      ACT.ATagParams = class="active"
    }

    ### Zweite Ebene ###
    2 = TMENU
    2 {
      noBlur = 1
      wrap = <ul onmouseover="show(this)" onmouseout="hide(this)">|</ul>
      NO.allWrap = <li>|</li>
    }
}

sobald ich über "tester" hover, und dann von dem hover runter gehe, verschwindet der navibutton einfach aus dem navi!

Würde mich über Hilfe sehr freuen!

grüße, Basti