HTML/CSS doppeltes DropDown Menu

Olitsch

Neues Mitglied
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:
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:
Code:
@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

Top Contributor
Und was funktioniert nicht?

In CSS3 kannst du direkte Kinder-Elemente mit > referenzieren:
Code:
/* Listenelement erster Ebene */
#navi > ul > li {}

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

/* Listenelement dritter Ebene */
#nvai > ul > li > ul > li li {}
 
Ähnliche Java Themen
  Titel Forum Antworten Datum
M JavaScript/HTML/CSS Hilfe HTML / CSS 1
V externes CSS in html HTML / CSS 6
V Horizontales Scroll-HTML HTML / CSS 2
V Variablenname in meinem HTML-Objekt HTML / CSS 3
Avalon Löschen Button HTML HTML / CSS 39
RashAGhul Html/Css Placeholder positionierung ändern HTML / CSS 6
PhilipMJNE Hilfe bei HTML und CSS! HTML / CSS 12
PhilipMJNE CSS in HTML via Link einbinden PROBLEM ! HTML / CSS 22
VPChief HTML Bei bestimmter eingabe in textfeld neu HTML Seite öffnen HTML / CSS 6
B Bilder aus Server in HTML anzeigen HTML / CSS 5
B Zeit für Doppelklick messen (HTML/JS) HTML / CSS 3
M Javascript: HTML-Datei erstellen und auf Festplatte speichern HTML / CSS 8
M HTML-Code einer fremden Webseite auslesen - geht das mit Javascript HTML / CSS 19
U Html Funktion Java Funktion zuweisen HTML / CSS 2
D Daten von einer HTML Datei auf eine andere HTML Datei bekommen HTML / CSS 2
E HTML DOM HTML / CSS 1
A Nur bestimmte Zeichen in HTML input Feld erlauben (JavaScript) HTML / CSS 11
Dimax HTML bei button click Formular an php senden aber andere seite öffnnen HTML / CSS 23
Dimax Mehrere css Dateien in eine HTML Seite einbinden HTML / CSS 3
Dimax Variable vom Get Request in HTML abfangen HTML / CSS 9
A Mit Modal (Bootstrap) eine html Seite anzeigen, die von id abhängig ist HTML / CSS 0
D HTML- Formulare an den Server senden HTML / CSS 7
S Quiz mit HTML/PHP erstellen HTML / CSS 3
W Keylistener Applet in Html HTML / CSS 9
S HTML Datei per E-Mail versenden HTML / CSS 3
K Html Programmieroberfläche einbinden (java) HTML / CSS 1
_Andi84 Unfertige HTML Ersetzungsfunktion HTML / CSS 1
T [JS] Extrahiere werte aus HTML Tabelle (td) aber nur bestimmten Teil HTML / CSS 5
K Verständnis von HTML/CSS & JScript HTML / CSS 2
Pataraca mit HTML auf php zugreifen HTML / CSS 1
I zugehörige HTML bzw. PHP Datei in den Entwicklertools finden HTML / CSS 3
D Hilfe bei erster Html-Aufgabe (Rahmen) HTML / CSS 6
KaffeeFan HTML Text rotieren HTML / CSS 2
K How to create Html tables for java parser objects? HTML / CSS 2
EisKaffee HTML interner Link soll neues Fenster aufmachen HTML / CSS 2
H javascript - html Beispiel LQH, verwirklichung HTML / CSS 1
I Menü, Header, Content ausgliedern aus einer HTML Seite HTML / CSS 2
G HTMl Tabellen-Zelle zeilen oder Höhe begrenzen HTML / CSS 1
R Dropdown width dynamisch auslesen HTML / CSS 2
V Javascript Adobe Acrobat XI Pro Formular Dropdown-Liste -> vorbelegte Checkboxen HTML / CSS 1

Ähnliche Java Themen

Neue Themen


Oben