nicht angemeldet
Probleme bei der Formatierung einer Liste mit CSS
0 
Ulysses
0 0
Probleme bei der Formatierung einer Liste mit CSS
Hallo,
beim Code unten entsteht beim Betrachten mit dem Firefox folgendes Problem:
"Seite1" und "Seite2" werden zunächst korrekt nebeneinander angezeigt. Sobald ich allerdings mit der Maus über "Seite1" fahre wird "Seite2" darunter angezeigt. "Seite2" sollte allerdings weiterhin neben "Seite1" angezeigt werden. Habt ihr eine Ahnung, wie ich das möglichst einfach erreichen kann?
<html>
<head>
<style type="text/css">
ul.navigation li
{
list-style: none;
}
ul.navigation > li
{
display: inline;
}
ul.navigation li ul
{
display: none;
}
ul.navigation li:hover ul
{
display: block;
}
ul.navigation a:hover
{
background-color: red;
}
</style>
</head>
<body>
<ul class="navigation">
<li>
<a href="#Beispiel">Seite 1</a>
<ul>
<li><a href="#Beispiel">Seite 1a</a></li>
<li><a href="#Beispiel">Seite 1b</a></li>
</ul>
</li>
<li>
<a href="#Beispiel">Seite 2</a>
<ul>
<li><a href="#Beispiel">Seite 2a</a></li>
<li><a href="#Beispiel">Seite 2b</a></li>
</ul>
</li>
</ul>
</body>
</html>
-
Hi!
Habt ihr eine Ahnung, wie ich das möglichst einfach erreichen kann?
Vielleicht suchst du so etwas: Pure CSS hover list
LG Ulysses -
"Seite1" und "Seite2" werden zunächst korrekt nebeneinander angezeigt. Sobald ich allerdings mit der Maus über "Seite1" fahre wird "Seite2" darunter angezeigt. "Seite2" sollte allerdings weiterhin neben "Seite1" angezeigt werden. Habt ihr eine Ahnung, wie ich das möglichst einfach erreichen kann?
Du kommst nicht darum herum die <ul> 2.Ebene position:absolute zu positionieren.
Dazu ist es erforderlichen das sie einen position:relative Anker im <li> Parent-Element haben.Sieh dich um in http://de.selfhtml.org/css/eigenschaften/positionierung.htm
mfg Beat;
-
Ich verstehe leider nicht so richtig was du meinst. Kannst du es vielleicht im Detail erläutern? Das wäre super
-
Ich verstehe leider nicht so richtig was du meinst. Kannst du es vielleicht im Detail erläutern? Das wäre super
<ul>
<li style="position:relative;">
<ul style="position:absolute;">
<li>...</li>
</ul>
<li>
<ul>position:absolute nimmt etwas aus dem normalen Fluss. genau das was du anscheinend brauchst. Bezugspunkt für die mit top left etc... deifinierten Positionierungs-Werte ist das Parent Element, dessen position nicht static ist.
mfg Beat;
-
-
-
Hallo!
Hast du <http://de.selfhtml.org/css/layouts/navigationsleisten.htm@title=diese Seite> schon gefunden?
Viele Grüße
Thorsten--
ie:( fl:( br:< va:) ls:& fo:) rl:° n4:° ss:) de:> js:| ch:? sh:( mo:| zu:)