nicht angemeldet
Hallo Engin,
das mit dem "z-index" war der richtige Tipp.
Vielen herzlichen Dank. Jetzt sieht es ganz gut aus.
Ich kannte das zwar mit dem "z-index" aber in diesem Fall bin ich nicht drauf gekommen weil in einem anderen Beispiel Scriptmenü das auch nicht vorkam und es hier trotzdem klappte.
Auch ist in diesem zweiten Beispiel das anders gelöst mit den "position"
Ich brauche bei "ul" position: absolute und bei "li" dann relative damit die Menüs nach unten aufgehen.:
ul#Navigation, ul#Navigation ul {
margin: 0;
padding: 0;
text-align: center;
position: absolute;
z-index: 1;
}
ul#Navigation li {
list-style: none;
float: left;
position: relative;
padding: 0;
}
Beim anderen Beispiel gibt es zweimal "absolute" und trotzdem erreicht man die gleiche Wirkung.
#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 li ul {
position: absolute;
left: -99em;
width: 180px;
height: auto;
font-weight: normal;
border-width: 0.25em;
margin: 0;
}
Auch arbeiten die hier ganz ohne "display: none"
Ich vermute das die hier das mit "left: -99em;" lösen?
Falls es dich interessiert hier das andere Beispielscript:
<!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
hawk