vertikale Navi mit Submenu - wie aktive Links hervorheben

    Guten Abend,

    ich versuche seit Stunden folgendes Problem zu lösen, komme aber damit irgendwie nicht klar :fragend: und würde mich deshalb über Hilfe freuen.

    Ich habe ein vertikales Menu mit einem Untermenu erstellt. Das hat alles prima geklappt.

    Problem ist jetzt nur, auf der Seite die gerade besucht wird soll der Link/Button optisch hervorgehoben werden (Schrift bzw. Buttonfarbe z. B. rot) und nicht beim wegnehmen der Maus wieder in die Ursprungsfarbe (weiß) wechseln.

    Das Gleiche soll auch bei dem Submenu so funktionieren. Außerdem soll es nach dem "aufblättern" "stehen bleiben" und nicht wieder zugehen. Zugehen soll es erst, wenn ein neuer Button außerhalb des Submenu angeklickt wird.

    Was kann ich tun?

    Gruß
    Anna


    Hier der Code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>vertikale Navi mit Submenu</title>
    <!--[if IE 6]><link rel="stylesheet" type="text/css" href="naviie6.css"><![endif]-->
    <!--[if IE 7]><link rel="stylesheet" type="text/css" href="ie7.css"><![endif]-->

    <style>
    * {
    margin:0;
    padding:0;
    list-style:none;
    text-decoration:none;
    }


    ul#navi , ul#navi ul {
    width:125px;
    float:left;
    background:#5b544a;
    }

    ul#navi a {
    display:block;
    padding:5px;
    color:#fff;
    font-size:12px;
    font-family:Arial, Helvetica, sans-serif;
    }


    ul#navi li {
    position:relative;
    }

    /* Alle Ebenen ausblenden */

    ul#navi ul ,
    ul#navi li:hover ul ul ,
    ul#navi li:hover ul ul ul {
    position:absolute;
    left:-9999px;
    top:0;
    background:#5b544a;
    }

    /* Einzelne Ebenen einblenden */
    ul#navi li:hover ul ,
    ul#navi ul li:hover ul ,
    ul#navi ul ul li:hover ul
    {
    left:125px;
    }


    /* Hover Hinter- und Vordergrundfarbe für alle Ebenen */
    ul#navi li:hover > a ,
    ul#navi ul li:hover > a,
    ul#navi ul ul li:hover > a,
    ul#navi ul ul ul li:hover > a
    {
    background:#7a7063;
    color:#990000;
    }

    ul#navi a span {
    float:left;
    font-weight:normal;
    }



    </style>


    </head>

    <body id="home">

    <ul id="navi">
    <li><a href="#">Button 1</a> </li>
    <li><a href="#">Button 2</a>
    <ul>
    <li><a href="#">Button 2a</a></li>
    <li><a href="#">Button 2b</a></li>
    <li><a href="#">Button 2c</a></li>
    </ul>
    </li>
    <li><a href="#">Button 3</a>
    <ul>
    <li><a href="#">Button 3a</a> </li>
    <li><a href="#">Button 3b</a></li>
    </ul>
    </li>

    <ul style="clear:both;">
    </ul>

    </body>


    </html>
    </html>

    Bin nicht sicher, ob ich dich ganz richtig verstehe hier. Du möchtest in der Navi einen Indikator haben, welches die aktuelle Seite ist? Das löst du am besten mit einer eigenen Klasse, die dann das entsprechende Navigationselement erhält.

    Das Submenü geöffnet zu lassen ist deutlich komplizierter. Wahrscheinlich liesse sich mit der Verwendung der Pseudoklase :focus etwas machen, wird in älteren IE-Versionen aber wahrscheinlich zu Problemen führen. Eine Alternative dazu wäre Javascript.