Guten Abend,
ich versuche seit Stunden folgendes Problem zu lösen, komme aber damit irgendwie nicht klar 
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>