nicht angemeldet
Klappmenü hover..
Tach auch,
so. Ich weiß. Es gibt kaum ein Thema, das es schon zu Hauf mit Beispielen gelöst wurde, als das horizontale Klappmenü mit hover und verschachtelter Liste :-) Trotzdem: Finde ich in meinem Code des Rätsels Lösung nicht.
Es wird, so lang das display:none für meine Subliste aktiv ist, alles so angezeigt wie ich will. Schön. Nur bekomme ich die Subliste nicht über den Link in der 1. Ebene angesprochen. Wenn man über "Menu1" hovert, soll bitteschön die <ul> der 2. Ebene ein display:block bekommen.
Was mache ich falsch? Ich freu mich über ein 2. und 3. Auge.
Hier der Übeltäter:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de">
<head>
<title>Menü Test CSS</title>
<style type="text/css">
<!--
/*EBENE 1*/
ul#menu{
width:490px;
top:72px;
left:30px;
margin:0;
padding:0;
background:#cd0714;
}
ul#menu a{
display:block;
height:30px;
text-decoration:none;
}
div#header ul li:hover{
background:#da4558;
}
ul#menu li{
position:relative;
float:left;
list-style:none;
}
.clear{
clear:left;
}
/*EBENE 2*/
ul#menu ul{
position:absolute;
right:0px;
margin:0;
padding:0;
/*display:none;*/
}
#menu li a:hover ul,
ul#menu ul li:hover ul{
display:block;
background:white;
}
ul#menu ul li{
float:none;
width:30px;
line-height:30px;
display:block;
background:green;
border-bottom:solid 1px #cd071e;
}
ul#menu ul li a{
display:block;
width:30px;
height:30px;
background:black;
text-decoration:none;
}
a#punkt1{
width:120px;
background:black;
}
a#punkt2{
width:140px;
background:white;
}
a#punkt3{
width:100px;
background:blue;
}
a#punkt4{
width:130px;
background:pink;
}
-->
</style>
</head>
<body>
<ul id="menu">
<li><a id="punkt1" href="#" onfocus="this.blur()">menu1</a>
<ul>
<li><a href="#" onfocus="this.blur()">aaa</a></li>
<li><a href="#" onfocus="this.blur()">bbb</a></li>
<li><a href="#" onfocus="this.blur()">ccc</a></li>
</ul>
</li>
<li><a id="punkt2" href="#" onfocus="this.blur()">menu2</a></li>
<li><a id="punkt3" href="#" onfocus="this.blur()">menu3</a></li>
<li><a id="punkt4" href="#" onfocus="this.blur()">menu4</a>
<ul>
<li><a href="#" onfocus="this.blur()">ddd</a></li>
<li><a href="#" onfocus="this.blur()">eee</a></li>
<li><a href="#" onfocus="this.blur()">fff</a></li>
</ul>
</li>
<li class="clear"></li>
</ul>
</div>
</body>
</html>
(Nebeninfo: die verbal-Farbangaben und Bemaßungen sind nur beispielhaft zum Testen :-) Und die Luinks brauche id's, weil Sie im echten Leben mit gleichnamigen Hintergrundbildern belegt sind)
-
Hi,
Nur bekomme ich die Subliste nicht über den Link in der 1. Ebene angesprochen. Wenn man über "Menu1" hovert, soll bitteschön die <ul> der 2. Ebene ein display:block bekommen.
Was mache ich falsch?Du schreibst Selektoren, die nicht zutreffen.
#menu li a:hover ul,
ul#menu ul li:hover ul{Der erste Selektor ist unsinnig, weil UL in XHTML 1.0 kein Nachfahr von A sein kann;
und der zweite trifft auch auf nichts in deiner Dokumentstruktur zu, weil du gar keine über drei Ebenen verschachtelten UL hast.Du solltest dir wirklich ein bisschen mehr Grundlagenwissen über den Umgang mit Selektoren anlesen - anstatt fortwährend Trial&Error zu betreiben, und dabei überwiegend bei letzterem zu landen.
http://wiki.selfhtml.org/wiki/Doku:CSS/Grundlagen_von_CSS/Ansprechen_von_Elementen_(Selektoren)
http://wiki.selfhtml.org/wiki/Referenzen:CSS/Selektorenreferenz
http://www.w3.org/TR/CSS21/selector.htmlMfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
danke. hab den entscheidenden hinweis gefunden für das gros der browser:
ul#menu li:hover>ul{
display:block;}
für den IE6 allerdings muss ich ja den link per hover ansprechen und nicht das listenelement. und DEN bekomme ich nun auch nach scharfem nachdenken nicht :-)
die sub-ul ist ja maximal nachfahre oder nachbar des links (im elementbaum), wenn ich das richtig verstehe. aber weder "ul#menu li a:hover ul" oder mit "+ul" sind korrekt.-
Hi,
die sub-ul ist ja maximal nachfahre oder nachbar des links (im elementbaum), wenn ich das richtig verstehe.
Nachfahre ist sie keineswegs; höchstens direkter Nachbar oder Geschwister.
aber weder "ul#menu li a:hover ul" oder mit "+ul" sind korrekt.
Wie du im Wiki nachlesen kannst, versteht der IE sowohl den Nachbar- als auch den Geschister-Selektor erst ab Version 7.
Einen JavaScript-Workaround beschreibt http://de.selfhtml.org/css/layouts/navigationsleisten.htm#modern; und wenn kein JS zur Verfügung steht, dann bleibt als Alternative nur entweder das Menü in diesem Fall voll ausgeklappt darstellen zu lassen, oder die Oberpunkte auf extra Seiten verlinken zu lassen, auf denen dann die jeweiligen Unterpunkte noch mal explizit aufgeführt sind.
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
hi chrisB,
ja-ich habe das javascript im head eingebaut und es funktioniert dann jetzt auch im ie6 :-/ ich hatte noch andere ätere menüvarianten gefunden, die dann so hässliche tabellen um die sublisten gebaut haben, die auch für den ie6 funktionieren, aber--das MUSS ja nun wirklich nicht :-) schade, dass es nur so geht, aber es geht! und ich werde mir die selektoren noch mal genau anscheun.
schönen tag
-
-
-
-
Hi,
<a id="punkt1" href="#" onfocus="this.blur()">menu1</a>
Macht das this.blur() eine Navigation per Tastatur nicht unmöglich?
~dave