DropDown-Navigation: Problem mit Menüpunktbreite

[DonutPanic]

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

[Ingo Turski]

Hi,

ich habe mir mit dem Javascript Framework Mootools ein Drop-Down-Menü gebastelt.

warum mit Framework? Und warum mit Javascript? Zwei Zeilen CSS tun das auch (ggfls. ergänzt durch ein paar Zeilen Javascript für den IE).

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

dann nimm die Unterpunkte über position:absolute aus dem Fluss.

freundliche Grüße
Ingo

[DonutPanic]

Hi,

ich habe mir mit dem Javascript Framework Mootools ein Drop-Down-Menü gebastelt.
warum mit Framework? Und warum mit Javascript? Zwei Zeilen CSS tun das auch (ggfls. ergänzt durch ein paar Zeilen Javascript für den IE).

Der Hauptmenüpunkt soll also nur so breit wie sein Titel sein, sprich unabhängig von seinen Untermenüpunkten.
dann nimm die Unterpunkte über position:absolute aus dem Fluss.

freundliche Grüße
Ingo

Das Framework ist dazu da, um das DropDown Menü flüssig ausfahren zu lassen (<a href="http://demos.mootools.net/Fx.Slide">http://demos.mootools.net/Fx.Slide</a>). 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.

Entschuldigt meinen vorherigen Post, hab die Antwort überlesen...

[Ingo Turski]

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

[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!

[Ingo Turski]

Hi,

Hi,
»»

full quote muss doch nicht sein, oder?

Ok Ingo, hast mich überzeugt. Dann halt ein CSS-basiertes DropDown-Menü.

schön; hätte ich gar nicht mit gerechnet...

Leider werden die Untermenüpunkte nun alle nebeneinander statt untereinander dargestellt.

Und das wundert Dich bei:

#nav li {
float: left;
/* width: 10em; */
}

? Dir fehlt #nav li li { float:none }  
  
freundliche Grüße  
Ingo

-- 
[[barrierefrei Ingo Webdesign](http://www.1ngo.de/web/) » [Suchmaschinenoptimierung](http://www.1ngo.de/web/seo.html) | [em?](http://www.1ngo.de/web/em.html) | [IE7 - Bugs](http://www.1ngo.de/web/ie7.html)]

[DonutPanic]

Mir fehlt manchaml ein wenig die Erfahrung um solche eigentlich simple Fehler schnell zu finden. Danke für deine Hilfe und bis zum nächsten mal!

[DonutPanic]

Ist mein Problem zu trivial oder fehlt ne wichtige Info?!