|
Die letzten 5 Postings in diesem Thema » Alle anzeigen
von elster |
ich habe den Fehler gefunden: es fehlte das position: absolute; für das nav ul { ... }
@Diskus
ein Listenpunkt schließt seine Unterpunkte immer ein: 1:
2:
3:
4:
5:
6:
7: | ...<li><a href="5" title="U2">U2</a>
<ul>
<li><a href="6" title="U2a">U2a</a></li>
<li><a href="7" title="U2b">U2b</a></li>
</ul>
</li>
<li><a href="8" title="U3">U3</a></li>... |
also </li> hinters </ul>
lG. elster |
von Diskus |
Hallo Elster.
Ich weiß nicht, ob ich deine Frage richtig verstehe, aber bei Listen (ul) wird nichts 'aufgeklappt'. Dazu verwendet man DropDown-Felder.
Wenn ich es so eingebe:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20: | <nav>
<ul>
<li><a href="1" title="W1">W1</a></li>
<li><a href="2" title="W2">W2</a></li>
<li><a title="U0" href="3">U0</a></li>
<ul>
<li><a href="4" title="U1">U1</a></li>
<li><a href="5" title="U2">U2</a></li>
<ul>
<li><a href="6" title="U2a">U2a</a></li>
<li><a href="7" title="U2b">U2b</a></li>
</ul>
<li><a href="8" title="U3">U3</a></li>
<li><a href="9" title="U4">U4</a></li>
</ul>
<li><a href="10" title="W8">W8</a></li>
<li><a href="11" title="W9">W9</a></li>
<li><a href="12" title="W10">W10</a></li>
</ul>
</nav> |
wird kein Leerraum angezeigt.
Allerdings hast du bei 'padding' sehr hohe Werte eingetragen, was die Ansicht schon etwas 'verzerrt'.
Gruß
Diskus |
von elster |
wenn per hover untergeordnete Elemente aufgeklappt werden, erzeugen sie entsprechend ihrer Breite in der übergeordneten Zeile eine Leerraum. Wie kann oder wie würdet ihr das verhindern - ohne Javascript.
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22: | <nav>
<ul>
<li><a href="1" title="W1">W1</a></li>
<li><a href="2" title="W2">W2</a></li>
<li><a href="U0">U0</a>
<ul>
<li><a href="">U1</a></li>
<li><a href="" title="U2">U2</a>
<ul>
<li><a href="" title="U2a">U2a</a></li>
<li><a href="" title="U2b">U2b</a></li>
</ul>
</li>
<li><a href="" title="U3">U3</a></li>
<li><a href="" title="U4">U4</a></li>
</ul>
</li>
<li><a href="" title="W8">W8</a></li>
<li><a href="" title="W9">W9</a></li>
<li><a href="" title="W10">W10</a></li>
</ul>
</nav> |
1:
2:
3:
4:
5:
6: | li a { background-color:yellow; display: inline-block; text-align: center; padding: 14px 16px; text-decoration: none; }
li a:hover { background-color: red; }
nav ul { border:0px solid red; list-style-type: none; margin: 0; padding: 0; }
nav ul li { float: left; }
nav ul li ul { display: none; }
nav ul li:hover > ul { display: block; } |
eli |
|
|
|