dwex
Erfahrenes Mitglied
Hallo Leute,
ich habe ein Listing für eine horizontale Navigation mit Flyouts.
Wie auf dem Bild "falsch.jpg" zu sehen werden die Untermenüs verschoben ohne das ich mir einen Reim drauf machen kann.
Auf dem Bild "richtig.jpg" habe ich das montiert wie ich eigentlich die Ausgabe erwarten würde.
Kann mir bitte jemand helfen - ich finde das Problem nicht.
ich habe ein Listing für eine horizontale Navigation mit Flyouts.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-DE">
<head>
<style type="text/css">
@import url("flyout.css");
</style>
</head>
<body>
<ul>
<li><a href="">Item 1</a>
<ul>
<li><a href="">Sub 1 Item 1</a></li>
<li><a href="">Sub 1 Item 2</a>
<ul>
<li><a href="">Sub 1 Sub 1 Item 1</a></li>
<li><a href="">Sub 1 Sub 1 Item 1</a></li>
</ul>
</li>
<li><a href="">Sub 1 Item 3</a></li>
</ul>
</li>
<li><a href="">Item 2</a>
<ul>
<li><a href="">Sub 2 Item 1</a></li>
<li><a href="">Sub 2 Item 2</a></li>
<li><a href="">Sub 2 Item 3</a></li>
</ul>
</li>
<li><a href="">Item 3</a></li>
<li><a href="">Item 4</a></li>
</ul>
</body>
</html>
CSS:
ul {
width: 450px;
list-style-type: none;
margin:10px;
}
ul ul {
display:none;
position:absolute;
width: 150px;
margin:0;
left: 0px;
top: 30px;
}
ul ul ul {
left: 150px;
top:0;
}
li {
float:left;
position: relative;
padding: 5px 15px 5px 5px;
background-color:#EEEEFF;
}
li li {
float:none;
background-color:#CCCCCC;
padding: 0;
}
li li li {
background-color:#CCCCCC;
}
li li li a {
background-color:#666666;
}
li li a {
width: 147px;
margin: 0;
padding:3px 0px 3px 3px;
line-height:20px;
display:block;
}
li:hover ul ul {
display:none;
}
li:hover ul {
display: block;
}
li li:hover ul {
display:block;
}Wie auf dem Bild "falsch.jpg" zu sehen werden die Untermenüs verschoben ohne das ich mir einen Reim drauf machen kann.
Auf dem Bild "richtig.jpg" habe ich das montiert wie ich eigentlich die Ausgabe erwarten würde.
Kann mir bitte jemand helfen - ich finde das Problem nicht.
