nicht angemeldet
Hallo Antipitch,
vielen Dank für deine Hilfe.
Was meinst du was ich mir die letzten Tage an Beispielen und Tutorial angesehen habe. Unter anderem auch dein Link.
ich wollte nun einfach mal selber was ausprobieren in der Hoffnung das ich dann die Zusammenhänge besser verstehe.
Ich hatte zum Beispiel ein tolles Menü gefunden:
(http://pfirsichmelba.de/artikel-scripts/suckerfish-barrierefrei.html)
Aber da bin ich mit den ganzen "em" Angaben nicht klargekommen.
Diese Lösung hat z.b. nur zweimal "position: absolute", einmal bei "ul" und dann noch bei "#sfnav li ul {".
In meinem ersten Beispiel (das von Self) geht das aber nur "relative" damit die Submenüs nach unten aufklappen.
Auch arbeitet die zweite Lösung ganz ohne "display: none".
Wenn ich es richtig verstanden habe machen die das "Verstecken" mit "left: -99em;"??
Ich beschäftige mich noch nicht so lange mit CSS, daher ist das für mich alles noch ein wenig verwirrend.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
li {padding: 0;margin:0;}
body {font: normal 0.76em arial;}
#sfnav, #sfnav ul {
width: 25em;
list-style: none;
line-height: 1;
background: white;
font-weight: bold;
padding: 0;
border: solid #6633CC;
border-width: 1px 0;
margin: 1em 0 1em 0;
position: absolute;
}
#sfnav a {
display: block;
color: #644f34;
text-decoration: none;
padding: 0.25em 2em;
}
#sfnav a.daddy {
background: url(rightarrow2.gif) no-repeat 95%;
}
#sfnav li {
float: left;
width: 150px;
padding: 0;
}
#sfnav li ul {
position: absolute;
left: -99em;
width: 180px;
height: auto;
font-weight: normal;
border-width: 0.25em;
margin: 0;
}
#sfnav li li {
width: 180px
}
#sfnav li ul ul {
margin: -1.75em 0 0 14em;
}
#sfnav li:hover ul ul, #sfnav li:hover ul ul ul{
left: -99em;
}
#sfnav li:hover ul{
left: auto;
}
#sfnav li li:hover ul, #sfnav li li li:hover ul{
left: -2px;
}
#nav3 li li.over ul.leftover{
left: -2px;
}
#nav3 #sfnav li.over,#sfnav li:hover {
background: #FFFF00;
}
</style>
</head>
<body>
<div id="nav3">
<ul id="sfnav">
<li><a href="#">Menue 1</a>
<ul>
<li><a href="#">Untermenue 1_1</a></li>
<li><a href="#">Untermenue 1_2</a></li>
</ul>
</li>
<li><a href="#">Menue 2</a>
<ul>
<li><a href="#">Untermenue 2_1</a></li>
<li><a href="#" class="daddy">Untermenue 2_2</a>
<ul>
<li><a href="#">Untermenue 2_2_1</a></li>
<li><a href="#">Untermenue 2_2_2</a></li>
</ul>
</li>
<li><a href="#">Untermenue 2_3</a></li>
</ul>
</li>
</ul></div>
</body>
</html>
viele Grüße und vielen Dank
hawk