Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 10.10.2015, 18:34
Saxxon Saxxon ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.05.2013
Beiträge: 15
Saxxon befindet sich auf einem aufstrebenden Ast
Standard Aufklapp-Untermenü

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="#" >&rArr; 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>
Mit Zitat antworten
Sponsored Links