Guten Abend.
Ich habe im Netz ein Aufklapp-Untermenü gefunden.
Funktioniert gut.
Ich hätte gern eine Verbesserung:
Wenn ich im Untermenü einen Punkt anklicke, klappt es wieder zusammen.
Das soll es nicht.
Es soll erst wieder zusammenklappen, wenn ich im Hauptmenü einen neuen Eintrag auswähle.
Ich bekomms nicht hin, welchen selector ich ansprechen muss und wie
Vielleicht habt ihr eine Lösung...
Danke Peter
HTML-Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Navigation</title>
<meta name="description" content="Navigation Sample">
<style type="text/css">
* {margin:0; padding:0;}
html,body {
width:100%;
height:100%;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:0.9em;
color:#2f2e2b;
background:#EEEEEE;
}
#menu {
padding:10px 0;
border: 1px dotted #999999;
width:150px;
}
li a {
display:block;
width:150px;
line-height:30px;
text-decoration:none;
text-align:center;
}
li a:hover {background:yellow;}
li a:active {background:white;}
li a:focus {background:green; }
#menu ul { height:0px; background:white; overflow:hidden;}
#menu ul li a {color:red}
#menu ul li a:hover {background:pink; }
#menu li a:focus + ul.fly {height:150px;}
</style>
</head>
<body>
<ul id="menu">
<li><a href="#" >Home</a></li>
<li><a href="#" >⇒ CRM</a>
<ul class="fly">
<li><a href="#">Customer Center</a></li>
<li><a href="#">Besuchsbericht</a></li>
<li><a href="#">Info Center</a></li>
<li><a href="#">Aktion erstellen</a></li>
<li><a href="#">Reklamation</a></li>
</ul>
</li>
<li><a href="#" >Kundenstamm</a></li>
<li><a href="#" >Lieferantenstamm</a></li>
<li><a href="#" >Rechnung prüfen</a></li>
</ul>
<body>
<html>