# HTML/CSS doppeltes DropDown Menu



## Olitsch (17. Dez 2013)

Hey Leute,

dann weih ich diesen Bereich mal ein 
Sitze gerade an einem Problem mit meiner Weboberfläche und hoffe, dass ich hier jemanden finde, der mir helfen kann.
Ziel ist es ein doppeltes Dropdown Menü zu erstellen, nach dem Thema:

Menü 2 --> Menü 2.1 --> Menü 2.1.1

Hier mal soweit mein Code: 

HTML:

```
<div class="navigation">
	<div id="vertical">
		<ul> 
		<li><a href="" class="link"><span></span> Mitgliederverwaltung </a></li><br><br>
		<li><a href="" class="link"><span></span> Mitgliederstatistik </a></li><br><br>
		<li><a href="" class="link"><span></span> Mitarbeiter </a></li><br><br>
		<li><a href="" class="link"><span></span> Rechnungswesen </a></li><br><br>
		<li><a href="" class="link"><span></span> Kurse </a><br><br>
		<ul>
			<li><a href="#"><span></span>Kurs </a>
				<ul>
				<li><a href="#">Anlegen </a></li>
				<li><a href="#">Bearbeiten </a></li>
				<li><a href="#">Löschen </a></li>
				</ul>
			</li>
			<li><a href="#"><span></span>Terminserien </a>
				<ul>
				<li><a href="#">Anlegen </a></li>
				<li><a href="#">Bearbeiten </a></li>
				<li><a href="#">Löschen </a></li>
				</ul>
			</li>
		</ul>
		</li>
		<li><a href="" class="link"><span></span> Geräte </a></li><br><br>
		<li><a href="" class="link"><span></span> Standort </a></li><br><br>
		<li><a href="" class="link"><span></span> System </a></li><br><br>
		</ul>
		</div>

		<form method="post" action="login.jsp" class="formular">
			<input type="submit" name="btn_abmelden" value="Abmelden">
		</form>
	</div>
```

CSS:

```
@CHARSET "ISO-8859-1";
html, body 
{
	height: 100%
}
.body 
{
	width: 99%;
	height: 100%;
	font-family: Verdana;/* Arial, Helvetica, sans-serif;*/
}
.navigation
{
	padding-left: 1%;
	width: 15%;
	clear: both;
	float: left;
	font-size: 115%;
	color: white;
	background-image: url('Navigation.jpg');
	background-size:cover;
}
/**
 * Vertical DropDown
 */

background: #fff;

/* Vertikales Menü CSS -> Basic Style
---------------------------------------------*/

/*gesamter Container*/ 
#vertical { 
	position: absolute; /* absolute Positionierung des gesamten Codes */
	z-index: 5; /*Höhe auf der Z-Ebene (in den Vordergrund)*/
}

/* Ungeordnete Liste */
#vertical ul{
	background-image: url('Navigation.jpg');
	width: 180px; /* Breite */
    list-style:none; /* kein Listen-stil, keine "Bullets"*/
    margin:1; /*kein Rand aussen*/
    padding:0; /* kein Rand innen */
    line-height: 0.5;
}

/*Listenpunkte */
#vertical ul li {
    position:relative; /*relative Positionierung der 
    					Listenpunkte, damit Unterpunkte 
    					absolut positioniert werden können.*/
}

/*Listenpunkte */
#vertical ul ul li {
    position:relative; /*relative Positionierung der 
    					Listenpunkte, damit Unterpunkte 
    					absolut positioniert werden können.*/
}

/* Links */
#vertical a {
    color:#f9f9f9; /* Schriftfarbe */
    padding:0px 0px; /* Abstände innerhalb */
    display:block; /* Block-Anzeige, jedes Element neue Zeile */
    text-decoration:none; /*keine Unterstreichung*/
    transition:1s; /* Fliessende Bewegung */
    -moz-transition:1s;
    -webkit-transition:1s;
    -o-transition:1s;
    font-family:Playfair Display; /* Schriftart */
    font-weight: bold; /* Fett */
    font-size:16px; /* Schriftgrösse */
}

/* Links Hoverzustand */
#vertical a:hover {
	background-image: url('Navigation.jpg');    
	color: white; /* Schrifrfarbe */
    font-style: italic;  /* Kursiv */
}
/* DROPPING MAGIC
---------------------------------------*/
/*Verhalten der Unterlisten bei Hover */
#vertical ul li:hover ul {
display:block; /* Blockanzeige der Unterlisten */
}
/*Submenulisten*/
#vertical ul ul {
position:absolute; /* Absolute Positionierung */
left:180px; /*Abstand Links (breite des Hauptmenüs) */
top:0; /*Abstand oben */
border-top:0px solid #e9e9e9; /* oberer Rand */
display:none; /* Keine Anzeige, wenn li nicht gehovert */
}
/*Listenelemente Submenu */
#vertical ul ul li {
width:170px; /* Breite */
background-image: url('Navigation.jpg');
border:0px solid #D5D7DB; /*Rand*/
border-top:0; /*Rand oben*/
line-height: 1.5; /*Zeilenabstand*/
}
/* Links Submenu */
#vertical ul ul li a {
color: white; /* Schriftfarbe */
font-size:15px; /* Schriftgrösse */
}
/* Links Submenu Hoverzustand */
#vertical ul ul li a:hover {
color: white; /*Schriftfarbe */
letter-spacing: 1px; /*Buchstabenabstand*/
background-image: url('Navigation.jpg');
}
/* Dropdown zweite Ebene
------------------------------*/
/*Verhalten der Unterlisten bei Hover */
#vertical ul li ul li:hover ul {
display:block; /* Blockanzeige der Unterlisten */
}
/*Submenulisten*/
#vertical ul ul ul {
position:absolute; /* Absolute Positionierung */
left:180px; /*Abstand Links (breite des Hauptmenüs) */
top:0; /*Abstand oben */
border-top:0px solid #e9e9e9; /* oberer Rand */
display:none; /* Keine Anzeige, wenn li nicht gehovert */
}
/*Listenelemente Submenu */
#vertical ul ul ul li {
width:170px; /* Breite */
background-image: url('Navigation.jpg');
border:0px solid #D5D7DB; /*Rand*/
border-top:0; /*Rand oben*/
line-height: 1.5; /*Zeilenabstand*/
}
/* Links Submenu */
#vertical ul ul ul li a {
color: white; /* Schriftfarbe */
font-size:15px; /* Schriftgrösse */
}
/* Links Submenu Hoverzustand */
#vertical ul ul ul li a:hover {
color: white; /*Schriftfarbe */
letter-spacing: 1px; /*Buchstabenabstand*/
background-image: url('Navigation.jpg');
}
/* TRIANGLES
------------------------------*/
/*Span-Elemente*/
#vertical span {
border-color: transparent #aaa transparent transparent; /*Dreieckfarbe */
border-style:solid; /*Randstyle*/
border-width:7px; /*Dreiecksgrösse*/
width:0; /*Breite (muss 0 sein)*/
height:0; /* Höhe (muss 0 sein*/
display:inline-block; /* Anzeigeart */
float:right; /* rechtsbündig */
margin-right:7px; /* Rand rechts */
position:relative; /* Positionierung */
transition:all 0.5s; /* Transition */
-moz-transition:all 0.5s;
-o-transition:all 0.5s;
-webkit-transition:all 0.5s;
}
/*Span im Hoverzustand */
#vertical a:hover span {
border-color: transparent #fff transparent transparent ; /* Dreieckfarbe */
transform:rotate(180deg); /* Rotation 180° */
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
}
```

Danke schon Mal im Voraus für eure Hilfe 

Grüße


----------



## Tobse (12. Mrz 2014)

Und was funktioniert nicht?

In CSS3 kannst du direkte Kinder-Elemente mit > referenzieren:

```
/* Listenelement erster Ebene */
#navi > ul > li {}

/* Listenelement zweiter Ebene */
#nvai > ul > li > ul > li {}

/* Listenelement dritter Ebene */
#nvai > ul > li > ul > li li {}
```


----------

