Dropdown-Menü mit CSS

Neue Frage »

Auf diesen Beitrag antworten »
dieinformatikerin Dropdown-Menü mit CSS

Hallo!
Ich möchte ein Dropdown-Menü erstellen wobei die ersten Unterpunkte (jeweils "leicht" und "schwer") durch hovern vertikal erscheinen sollen. Bei weiterem hovern über "leicht" und "schwer" sollen die folgenden Links (Lied1, Lied2, Lied3, Lied4) rechts neben "leicht" bzw. "schwer" erscheinen. Hab das ganze mit untergeordneten Listen versucht und soweit funktioniert alles, außer das anzeigen von Lied1-Lied4 jeweils rechts neben "leicht" und "schwer". In den Anhängen befindet sich das bisher programmierte, vielen Dank schon mal in Voraus!
 
Auf diesen Beitrag antworten »
eulerscheZahl

Naja, so ungefähr...
code:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
<body>
<nav>
<div>

<ul id="nav">
	<li> <a href="#">Wörter auswählen</a> &nbsp;&nbsp;
		<ul class="level1">
			<li> <a href="#">leicht</a> &nbsp;&nbsp;
				<ul class="level2">
					<li> <a href="#">Lied1</a></li>
					<li> <a href="#">Lied2</a></li>
				</ul>
			</li>
		</ul>
		<ul class="level1">
			<li> <a href="#">schwer</a> &nbsp;&nbsp;
				<ul class="level2">
					<li> <a href="#">Lied3</a></li>
					<li> <a href="#">Lied4</a></li>
				</ul>
			</li>
		</ul>
	</li>

	<li> <a href="#">Lyrics auswählen</a> &nbsp;&nbsp;
		<ul class="level1">
			<li> <a href="#">leicht</a>&nbsp;&nbsp;
				<ul class="level2">
					<li> <a href="#">Lied1</a></li>
					<li> <a href="#">Lied2</a></li>
				</ul>
			</li>
		</ul>
		<ul class="level1">
			<li><a href="#">schwer</a> &nbsp;&nbsp;
				<ul class="level2">
					<li><a href="#">Lied3</a></li>
					<li><a href="#">Lied4</a></li>
				</ul>
			</li>
		</ul>
	</li>
</ul>
</div>
</nav>
</body>

<style>
	nav ul {
		list-style: none;
		margin: 0;
		padding: 0;	
	}
	
	nav ul li {
		float: left;
	}
	
	nav ul li ul {
		display: none;
		overflow: hidden;
	}
	
	nav ul li:hover ul {
		display: block;
		position: relative;
	}
	
	nav ul li ul li {
		display: inline-block;
	}
	
	nav ul li ul li ul li {
		display: none;
		overflow: hidden;
	}
	
	nav ul li ul li:hover ul li {
		display: block;
		position: relative;
		margin-left:120px;
	}
</style>
Auf diesen Beitrag antworten »
dieinformatikerin

Vielen lieben dank!
 
Neue Frage »
Antworten »


Verwandte Themen

Die Beliebtesten »
Die Größten »
Die Neuesten »