DropDown-Navigation: Problem mit Menüpunktbreite

[DonutPanic]

Hi,

Das Framework ist dazu da, um das DropDown Menü flüssig ausfahren zu lassen
Du meinst wohl eher zähflüssig. ;-)
Und um den Besucher beim Menü unnötig warten zu lassen, muss er auch noch 91kb JS-Code laden...

Leider funktioniert das Framework nicht mehr, wenn ich die Unterpunkte mit position: absolute aus dem Fluss nehme, da es mit margin-top arbeitet, und das dadurch nicht mehr greift.
das Framework hat damit nichts zu tun - nur das Script für diese Warterei. Darin müsstest Du vermutlich nur top statt margin-top ändern.

freundliche Grüße
Ingo

Ok Ingo, hast mich überzeugt. Dann halt ein CSS-basiertes DropDown-Menü. Was mich dann auch gleich zum nächsten Problem führt:

Ich habe das Suckerfish-DropDown ein wenig umgebaut. Genauer gesagt habe ich die festen Breiten für die Menü- und Untermenüpunkte entfernt, damit sie nur so breit wie ihr Inhalt sind. Leider werden die Untermenüpunkte nun alle nebeneinander statt untereinander dargestellt.

  
<ul id="nav">  
    <li><a href="#">Hauptmenüpunkt 1</a>  
        <ul>  
            <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><a href="#">Hauptmenüpunkt 2</a>  
        <ul>  
            <li><a href="#">Link 1 extra long long</a></li>  
            <li><a href="#">Link 2</a></li>  
            <li><a href="#">Link 3</a></li>  
        </ul>  
    </li>  
    <li><a href="#">Hauptmenüpunkt 3</a>  
        <ul>  
            <li><a href="#">Link 1</a></li>  
            <li><a href="#">Link 2</a></li>  
            <li><a href="#">Link 3</a></li>  
        </ul>  
    </li>  
</ul>  

das zugehörige CSS

  
#nav, #nav ul {  
 padding: 0;  
 margin: 0;  
 list-style: none;  
}  
  
#nav a {  
 display: block;  
 margin-right: 5px;  
 /* width: 10em; */  
}  
  
#nav li {  
 float: left;  
 /* width: 10em; */  
}  
#nav li ul {  
 position: absolute;  
 /* width: 10em; */  
 left: -999em;  
 background-color: #ffffff;  
}  
  
#nav li:hover ul, #nav li.sfhover ul {  
 left: auto;  
}  

Danke für die Hilfe!