Problem mit Drop Down Navigation

[zerophreak]

Hi Jungs,

bei meiner Drop Down Navigation habe ich einen Flyout.
Wenn man auf diesen Flyout geht, wird die Breite des übergeordneten Menüeintrags (1st Level) breiter und verschiebt somit die ganze Leiste - das ist nicht. Schön. Woran liegt das?

Hier Screens und Code:

Der HTML Code ist Joomla-mäßig aufgebaut: (mit <a> und <span>)
<ul>
<li>Level 1</li>
<li>Level 1<ul><li>Level 2</li><Li>Level 2</li></ul></li>
</ul>

div.navigation {
    width: 980px;
    height: 35px;
    background-image: url(../images/navigation.jpg);
    background-repeat: repeat-x;
    margin-top: 1px;
}
div.navigation ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
div.navigation li {
    float: left;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 8px; 
    padding-bottom: 7px;
    background-image: url(../images/navsplitter.png);
    background-repeat: no-repeat;
    background-position: right;
    font-size: 14px;
    height: 20px;
}
div.navigation li a { text-decoration:none; color:#FFF;  }
ul#menulist_root li ul {
    display:none;
}
ul#menulist_root li:hover ul {
    display:block;
    background:none;
    margin-left: -21px;
    margin-top: 10px;
}
ul#menulist_root li ul li {
    background: url(../images/navflyout.jpg);
    opacity:.85;
    filter: alpha(opacity=85);
    -moz-opacity: 0.85;
    clear:both;
    min-width: 100px;
    padding: 0;
    padding-left: 20px;
    padding-right: 60px;
    padding-top: 5px;
    padding-bottom: 0;
    font-size: 12px;
    color: #000;
    border-left: 1px solid #CCC;
    border-right: 1px solid #CCC;
    border-bottom: 1px solid #CCC;
}
ul#menulist_root li ul li:hover {
    background: url(../images/navflyoutactive.jpg);
    color: #FFF;
}
ul#menulist_root li ul li a {
    background:none;
    width: 66px;
}
ul#menulist_root li ul li a:hover {
    color:#AA0000;
    background:none;
}

Besten Dank für eure kompente Hilfe :)

 

[threadi]

Du müsstest das ausklappende Menü absolut innerhalb des Menüpunkts positionieren. Also:

Bei "div.navigation li" noch ergänzen:

position: relative;
z-index: 10;

Und

ul#menulist_root li ul {
    display:none;
    position: absolute;
    top: 20px;
    left: 0;
}

 

[zerophreak]

Ihr habt's echt drauf, danke ;)