nicht angemeldet
Probleme mit li:hover
Gernot BackHallo Leute,
ich stehe leider vollkommen auf dem Schlauch. Ich muss ein dropdown-Menu erstellen mit css. Der Eingabestring kommt aus einem Shopsystem und ist somit unveränderlich vorgegeben. Das menu hat 3 Ebenen. Von der ersten Ebene aus soll mit hover die zweite aufgeklappt werden. Wie das grundsätzlich läuft weis ich. Mein Problem ist: Ich kann immer nur die dritte Ebene von der zweiten aus auf und zuklappen (display:block---> display:none)Von der ersten Ebene aus kann ich nur die zweite erfolgreich verstecken aber nicht aufklappen. Soll heißen: li:hover ul display:block geht hier einfach nicht obwohl es in der dritten Ebene funktioniert. Ich gebe mal den Quelltext mit.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
body, p a {
font: normal 100.01% Helvetica, Arial, sans-serif;
color: black; background-color: #ffffe0;
}
div#Rahmen {
width: 47.1em;
padding: 0.8em;
border: 1px solid black;
background-color: silver;
}
* html div#Rahmen { /* Korrektur fuer IE 5.x */
width: 48.7em;
w\idth: 47.1em;
}
div#Rahmen div {
clear: left;
}
ul.main_menu {
margin: 0; padding: 0;
text-align: center;
}
ul.main_menu li {
list-style: none;
float: left;
width: 8.6em;
position: relative;
margin: 0.4em; padding: 0;
}
* html ul.main_menu li { /* Korrektur fuer den IE */
margin-bottom: -0.4em;
}
ul.main_menu li ul {
margin: 0; padding: 0;
position: absolute;
top: 1.7em; left: -0.4em;
}
* html ul.main_menu li ul { /* Korrektur fuer IE 5.x */
left: -1.5em;
lef\t: -0.4em;
}
ul.main_menu li ul li {
float: none;
display: block;
margin-bottom: 0.2em;
}
ul.main_menu a, ul.main_menu span {
display: block;
padding: 0.2em 1em;
text-decoration: none; font-weight: bold;
border: 1px solid black;
border-left-color: white; border-top-color: white;
color: maroon; background-color: #ccc;
}
* html ul.main_menu a, * html ul.main_menu span { /* nur fuer IE erforderlich */
width: 100%;
w\idth: 6.4em;
}
ul.main_menu a:hover, ul.main_menu span, li a.level2_sub {
border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: gray;
}
/** versteckt, und zeigt bei :hover ebene level3**/
/**********************************************************************/
ul.main_menu li ul ul { display:none; }
/
ul.main_menu li:hover ul { display:block; }
/**********************************************************************/
/** versteckt ebene level2 zeigt aber level 2 bei :hover nicht an**/
/******************alternative ********************/
ul.main_menu li ul { display:none; }
ul.main_menu li:hover ul { display:block; }
/**********************************************************************/
</style>
</head>
<body>
<ul class="main_menu"> <li class="level1" id="plentycat_987-0-0-0-0-0"><a href="/-Bio-Wellness/c-987.html" title="Bio-Wellness">Bio & Wellness</a></li>
<li class="level2_sub"><ul> <li class="level2" id="plentycat_987-995-0-0-0-0"><a href="/-Bio-Wellness-Bio/c-987-995.html" title="Bio-Wellness-Bio">Bio</a></li>
<li class="level3_sub"><ul> <li class="level3" id="plentycat_987-995-997-0-0-0"><a href="/-Bio-Wellness-Bio-Bio-Zentrale-Naturprodukte/c-987-995-997.html" title="Bio-Wellness-Bio-Bio-Zentrale-Naturprodukte">Bio Zentrale Naturprodukte</a></li>
<li class="level3" id="plentycat_987-995-996-0-0-0"><a href="/-Bio-Wellness-Bio-Kanne/c-987-995-996.html" title="Bio-Wellness-Bio-Kanne">Kanne</a></li>
<li class="level3" id="plentycat_987-995-1002-0-0-0"><a href="/-Bio-Wellness-Bio-Rinatura/c-987-995-1002.html" title="Bio-Wellness-Bio-Rinatura">Rinatura</a></li> </ul></li>
<li class="level2" id="plentycat_987-988-0-0-0-0"><a href="/-Bio-Wellness-Diaetprodukte/c-987-988.html" title="Bio-Wellness-Diaetprodukte">Diätprodukte</a></li>
<li class="level3_sub"><ul> <li class="level3" id="plentycat_987-988-994-0-0-0"><a href="/-Bio-Wellness-Diaetprodukte-Alpia-Schokolade/c-987-988-994.html" title="Bio-Wellness-Diaetprodukte-Alpia-Schokolade">Alpia Schokolade</a></li> <li class="level3" id="plentycat_987-988-271-0-0-0"><a href="/-Bio-Wellness-Diaetprodukte-Bahlsen/c-987-988-271.html" title="Bio-Wellness-Diaetprodukte-Bahlsen">Bahlsen</a></li> <li class="level3" id="plentycat_987-988-999-0-0-0"><a href="/-Bio-Wellness-Diaetprodukte-Bleckmann-Gebaeck/c-987-988-999.html" title="Bio-Wellness-Diaetprodukte-Bleckmann-Gebaeck">Bleckmann Gebäck</a></li> <li class="level3" id="plentycat_987-988-1004-0-0-0"><a href="/-Bio-Wellness-Diaetprodukte-Canderel/c-987-988-1004.html" title="Bio-Wellness-Diaetprodukte-Canderel">Canderel</a></li> <li class="level3" id="plentycat_987-988-998-0-0-0"><a href="/-Bio-Wellness-Diaetprodukte-Coppenrath-Gebaeck/c-987-988-998.html" title="Bio-Wellness-Diaetprodukte-Coppenrath-Gebaeck">Coppenrath Gebäck</a></li> <li <li class="level3" id="plentycat_987-988-952-0-0-0"><a href="/-Bio-Wellness-Diaetprodukte-Goebber/c-987-988-952.html" title="Bio-Wellness-Diaetprodukte-Goebber">Göbber</a></li>
<li class="level3" id="plentycat_987-988-992-0-0-0"><a href="/-Bio-Wellness-Diaetprodukte-Gruyters-Kekse/c-987-988-992.html" title="Bio-Wellness-Diaetprodukte-Gruyters-Kekse">Gruyters Kekse</a></li>
<li class="level3" id="plentycat_987-988-991-0-0-0"><a href="/-Bio-Wellness-Diaetprodukte-Huxol/c-987-988-991.html" title="Bio-Wellness-Diaetprodukte-Huxol">Huxol</a></li>
<li class="level3" id="plentycat_987-988-993-0-0-0"><a href="/-Bio-Wellness-Diaetprodukte-Lindt-Schokolade/c-987-988-993.html" title="Bio-Wellness-Diaetprodukte-Lindt-Schokolade">Lindt Schokolade</a></li>
<li class="level3" id="plentycat_987-988-1003-0-0-0"><a href="/-Bio-Wellness-Diaetprodukte-Milka-Schokolade/c-987-988-1003.html" title="Bio-Wellness-Diaetprodukte-Milka-Schokolade">Milka Schokolade</a></li>
<li class="level3" id="plentycat_987-988-989-0-0-0"><a href="/-Bio-Wellness-Diaetprodukte-Natreen/c-987-988-989.html" title="Bio-Wellness-Diaetprodukte-Natreen">Natreen</a></li> <li class="level3" id="plentycat_987-988-325-0-0-0"><a href="/-Bio-Wellness-Diaetprodukte-Ritter-Sport/c-987-988-325.html" title="Bio-Wellness-Diaetprodukte-Ritter-Sport">Ritter Sport</a></li>
<li class="level3" id="plentycat_987-988-946-0-0-0"><a href="/-Bio-Wellness-Diaetprodukte-Schneekoppe/c-987-988-946.html" title="Bio-Wellness-Diaetprodukte-Schneekoppe">Schneekoppe</a></li>
<li class="level3" id="plentycat_987-988-1001-0-0-0"><a href="/-Bio-Wellness-Diaetprodukte-Schulte/c-987-988-1001.html" title="Bio-Wellness-Diaetprodukte-Schulte">Schulte</a></li>
<li class="level3" id="plentycat_987-988-717-0-0-0"><a href="/-Bio-Wellness-Diaetprodukte-Schwartau/c-987-988-717.html" title="Bio-Wellness-Diaetprodukte-Schwartau">Schwartau</a></li>
<li class="level3" id="plentycat_987-988-944-0-0-0"><a href="/-Bio-Wellness-Diaetprodukte-Zentis/c-987-988-944.html" title="Bio-Wellness-Diaetprodukte-Zentis">Zentis</a></li>
<li class="level3" id="plentycat_987-988-725-0-0-0"><a href="/-Bio-Wellness-Diaetprodukte-Weitere-Marken/c-987-988-725.html" title="Bio-Wellness-Diaetprodukte-Weitere-Marken">Weitere Marken</a></li> </ul></li>
<li class="level2" id="plentycat_987-202-0-0-0-0"><a href="/-Bio-Wellness-Diaetartikel/c-987-202.html" title="Bio-Wellness-Diaetartikel">Diätartikel</a></li>
<li class="level3_sub"><ul> <li class="level3" id="plentycat_987-202-1035-0-0-0"><a href="/-Bio-Wellness-Diaetartikel-Weight-Watchers/c-987-202-1035.html" title="Bio-Wellness-Diaetartikel-Weight-Watchers">Weight Watchers</a></li></ul>
<li class="level2" id="plentycat_987-990-0-0-0-0"><a href="/-Bio-Wellness-Gesunde-Ernaehrung/c-987-990.html" title="Bio-Wellness-Gesunde-Ernaehrung">Gesunde Ernährung</a></li>
</body>
</html>
-
Hallo Hortidesideri,
Mein Problem ist: Ich kann immer nur die dritte Ebene von der zweiten aus auf und zuklappen (display:block---> display:none)Von der ersten Ebene aus kann ich nur die zweite erfolgreich verstecken aber nicht aufklappen. Soll heißen: li:hover ul display:block geht hier einfach nicht obwohl es in der dritten Ebene funktioniert.
Deine Problembeschreibung ist offensichtlich ungenügend. Sonst hätte sich gewiss schon jemand gemeldet.
Würde es vielleicht helfeen, wenn du, da du das Ganze ja sowieso nur mit CSS lösen und auf ältere IEs pfeifen willst, den Kindselektor ">" statt des Nachfahrenselektors " " (Leerzeichen) benutzt?
Gruß Gernot
--
super me