DonutPanic: DropDown-Navigation: Problem mit Menüpunktbreite

Beitrag lesen

SELF-Forum

DropDown-Navigation: Problem mit Menüpunktbreite

DonutPanic
– Informationen zu den Bewertungsregeln

Hallo zusammen,

ich habe mir mit dem Javascript Framework Mootools ein Drop-Down-Menü gebastelt. Das funktioniert auch so weit, nur leider bin ich mit dem Aussehen noch nicht zufrieden. Genauer gesagt passt sich die Breite eines Hauptmenüpunktes an den Inhalt seiner Untermenüpunkte an und das will ich verhindern. Besser wäre es so: http://www.cssplay.co.uk/menus/variable_dl.html

Der Hauptmenüpunkt soll also nur so breit wie sein Titel sein, sprich unabhängig von seinen Untermenüpunkten.

Hier mein HTML:

  
<div id="navi_right">  
    <ul id="drop_down_menu_right">  
        <li class="menu">Menu 1  
            <ul class="links">  
                <li><a href="#">Link 1</a></li>  
                <li><a href="#">Link 2 extra long</a></li>  
                <li><a href="#">Link 3</a></li>  
                <li><a href="#">Link 4</a></li>  
                <li><a href="#">Link 5</a></li>  
                <li><a href="#">Link 6</a></li>  
                <li><a href="#">Link 7</a></li>  
                <li><a href="#">Link 8</a></li>  
            </ul>  
        </li>  
        <li class="menu">Menu 2  
            <ul class="links">  
                <li><a href="#">Link 1</a></li>  
                <li><a href="#">Link 2</a></li>  
                <li><a href="#">Link 3</a></li>  
            </ul>  
        </li>  
    </ul>  
</div>

und das passende CSS:

  
#navi_right {  
 position: absolute;  
 display: block;  
 top: 40px;  
 left: 20px;  
 text-transform: uppercase;  
 text-align: left;  
 width: 430px;  
 z-index: 99;  
}  
#drop_down_menu_right {  
 display: block;  
 position: absolute;  
 width: 430px;  
 clear: both;  
 margin: 0px;  
 padding: 0px;  
 text-align: left;  
 list-style-type: none;  
 float: none;  
 left: 0px;  
 top: 0px;  
}  
#drop_down_menu_right li {  
 float: left;  
 color: #757678;  
 cursor: pointer;  
 background: #ffffff;  
 z-index: 99;  
}  
#drop_down_menu_right li ul {  
 margin: 0px;  
 padding: 0px;  
 list-style-type: none;  
}  
#drop_down_menu_right li ul li  {  
 float: none;  
 clear: both;  
}  
#drop_down_menu_right li ul li a{  
 color: #757678;  
 text-decoration: 1px solid #0000ff;  
 display: block;  
}

Welche Styleeigenschaft muss ich ändern, damit es funktioniert?!

Ich sitze leider schon ne halbe Ewigkeit an dem Problem :-/

Danke

Beitrag melden
–
Informationen zu den Bewertungsregeln