• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Problem mit Drop Down Navigation

zerophreak

Neues Mitglied
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:
noarnvze.png
hlq28pom.png


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>

Code:
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 :)
 
Du müsstest das ausklappende Menü absolut innerhalb des Menüpunkts positionieren. Also:

Bei "div.navigation li" noch ergänzen:
Code:
position: relative;
z-index: 10;

Und

Code:
ul#menulist_root li ul {
    display:none;
    position: absolute;
    top: 20px;
    left: 0;
}
 
Zurück
Oben