tag:forum.selfhtml.org,2005:/self DropDown-Navigation: Problem mit Menüpunktbreite – SELFHTML-Forum 2008-09-10T13:42:06Z https://forum.selfhtml.org/self/2008/sep/9/dropdown-navigation-problem-mit-menuepunktbreite/1287583#m1287583 DonutPanic phil.87@web.de 2008-09-09T16:29:52Z 2008-09-09T16:29:52Z DropDown-Navigation: Problem mit Menüpunktbreite <p>Hallo zusammen,</p> <p>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: <a href="http://www.cssplay.co.uk/menus/variable_dl.html" rel="nofollow noopener noreferrer">http://www.cssplay.co.uk/menus/variable_dl.html</a></p> <p>Der Hauptmenüpunkt soll also nur so breit wie sein Titel sein, sprich unabhängig von seinen Untermenüpunkten.</p> <p>Hier mein HTML:</p> <pre><code class="block language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>navi_right<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>drop_down_menu_right<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>menu<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Menu 1 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>links<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Link 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Link 2 extra long<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Link 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Link 4<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Link 5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Link 6<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Link 7<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Link 8<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>menu<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Menu 2 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>links<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Link 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Link 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Link 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> </code></pre> <p>und das passende CSS:</p> <pre><code class="block language-css"> <span class="token selector">#navi_right</span> <span class="token punctuation">{</span> position<span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> display<span class="token punctuation">:</span> block<span class="token punctuation">;</span> top<span class="token punctuation">:</span> 40px<span class="token punctuation">;</span> left<span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> text-transform<span class="token punctuation">:</span> uppercase<span class="token punctuation">;</span> text-align<span class="token punctuation">:</span> left<span class="token punctuation">;</span> width<span class="token punctuation">:</span> 430px<span class="token punctuation">;</span> z-index<span class="token punctuation">:</span> 99<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#drop_down_menu_right</span> <span class="token punctuation">{</span> display<span class="token punctuation">:</span> block<span class="token punctuation">;</span> position<span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> width<span class="token punctuation">:</span> 430px<span class="token punctuation">;</span> clear<span class="token punctuation">:</span> both<span class="token punctuation">;</span> margin<span class="token punctuation">:</span> 0px<span class="token punctuation">;</span> padding<span class="token punctuation">:</span> 0px<span class="token punctuation">;</span> text-align<span class="token punctuation">:</span> left<span class="token punctuation">;</span> list-style-type<span class="token punctuation">:</span> none<span class="token punctuation">;</span> float<span class="token punctuation">:</span> none<span class="token punctuation">;</span> left<span class="token punctuation">:</span> 0px<span class="token punctuation">;</span> top<span class="token punctuation">:</span> 0px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#drop_down_menu_right li</span> <span class="token punctuation">{</span> float<span class="token punctuation">:</span> left<span class="token punctuation">;</span> color<span class="token punctuation">:</span> #757678<span class="token punctuation">;</span> cursor<span class="token punctuation">:</span> pointer<span class="token punctuation">;</span> background<span class="token punctuation">:</span> #ffffff<span class="token punctuation">;</span> z-index<span class="token punctuation">:</span> 99<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#drop_down_menu_right li ul</span> <span class="token punctuation">{</span> margin<span class="token punctuation">:</span> 0px<span class="token punctuation">;</span> padding<span class="token punctuation">:</span> 0px<span class="token punctuation">;</span> list-style-type<span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#drop_down_menu_right li ul li</span> <span class="token punctuation">{</span> float<span class="token punctuation">:</span> none<span class="token punctuation">;</span> clear<span class="token punctuation">:</span> both<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#drop_down_menu_right li ul li a</span><span class="token punctuation">{</span> color<span class="token punctuation">:</span> #757678<span class="token punctuation">;</span> text-decoration<span class="token punctuation">:</span> 1px solid #0000ff<span class="token punctuation">;</span> display<span class="token punctuation">:</span> block<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Welche Styleeigenschaft muss ich ändern, damit es funktioniert?!</p> <p>Ich sitze leider schon ne halbe Ewigkeit an dem Problem :-/</p> <p>Danke</p> https://forum.selfhtml.org/self/2008/sep/9/dropdown-navigation-problem-mit-menuepunktbreite/1287585#m1287585 Ingo Turski selfhtml2008b@ingo-webdesign.de http://www.1ngo.de/web/ 2008-09-09T21:29:55Z 2008-09-09T21:29:55Z DropDown-Navigation: Problem mit Menüpunktbreite <p>Hi,</p> <blockquote> <p>ich habe mir mit dem Javascript Framework Mootools ein Drop-Down-Menü gebastelt.</p> </blockquote> <p>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).</p> <blockquote> <p>Der Hauptmenüpunkt soll also nur so breit wie sein Titel sein, sprich unabhängig von seinen Untermenüpunkten.</p> </blockquote> <p>dann nimm die Unterpunkte über position:absolute aus dem Fluss.</p> <p>freundliche Grüße<br> Ingo</p> <div class="signature">-- <br> [<a href="http://www.1ngo.de/web/" rel="nofollow noopener noreferrer">barrierefrei Ingo Webdesign</a> » <a href="http://www.1ngo.de/web/seo.html" rel="nofollow noopener noreferrer">Suchmaschinenoptimierung</a> | <a href="http://www.1ngo.de/web/em.html" rel="nofollow noopener noreferrer">em?</a> | <a href="http://www.1ngo.de/web/ie7.html" rel="nofollow noopener noreferrer">IE7 - Bugs</a>] </div> https://forum.selfhtml.org/self/2008/sep/9/dropdown-navigation-problem-mit-menuepunktbreite/1287584#m1287584 DonutPanic 2008-09-10T07:45:08Z 2008-09-10T07:45:08Z DropDown-Navigation: Problem mit Menüpunktbreite <p>Ist mein Problem zu trivial oder fehlt ne wichtige Info?!</p> https://forum.selfhtml.org/self/2008/sep/9/dropdown-navigation-problem-mit-menuepunktbreite/1287586#m1287586 DonutPanic 2008-09-10T07:51:37Z 2008-09-10T07:51:37Z DropDown-Navigation: Problem mit Menüpunktbreite <blockquote> <p>Hi,</p> <blockquote> <p>ich habe mir mit dem Javascript Framework Mootools ein Drop-Down-Menü gebastelt.<br> 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).</p> </blockquote> <blockquote> <p>Der Hauptmenüpunkt soll also nur so breit wie sein Titel sein, sprich unabhängig von seinen Untermenüpunkten.<br> dann nimm die Unterpunkte über position:absolute aus dem Fluss.</p> </blockquote> <p>freundliche Grüße<br> Ingo</p> </blockquote> <p>Das Framework ist dazu da, um das DropDown Menü flüssig ausfahren zu lassen (<code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://demos.mootools.net/Fx.Slide<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>http://demos.mootools.net/Fx.Slide<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span></code>). 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.</p> <p>Entschuldigt meinen vorherigen Post, hab die Antwort überlesen...</p> https://forum.selfhtml.org/self/2008/sep/9/dropdown-navigation-problem-mit-menuepunktbreite/1287587#m1287587 Ingo Turski selfhtml2008b@ingo-webdesign.de http://www.1ngo.de/web/ 2008-09-10T09:11:26Z 2008-09-10T09:11:26Z DropDown-Navigation: Problem mit Menüpunktbreite <p>Hi,</p> <blockquote> <p>Das Framework ist dazu da, um das DropDown Menü flüssig ausfahren zu lassen</p> </blockquote> <p>Du meinst wohl eher zähflüssig. ;-)<br> Und um den Besucher beim Menü unnötig warten zu lassen, muss er auch noch 91kb JS-Code laden...</p> <blockquote> <p>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.</p> </blockquote> <p>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.</p> <p>freundliche Grüße<br> Ingo</p> <div class="signature">-- <br> [<a href="http://www.1ngo.de/web/" rel="nofollow noopener noreferrer">barrierefrei Ingo Webdesign</a> » <a href="http://www.1ngo.de/web/seo.html" rel="nofollow noopener noreferrer">Suchmaschinenoptimierung</a> | <a href="http://www.1ngo.de/web/em.html" rel="nofollow noopener noreferrer">em?</a> | <a href="http://www.1ngo.de/web/ie7.html" rel="nofollow noopener noreferrer">IE7 - Bugs</a>] </div> https://forum.selfhtml.org/self/2008/sep/9/dropdown-navigation-problem-mit-menuepunktbreite/1287588#m1287588 DonutPanic 2008-09-10T11:46:16Z 2008-09-10T11:46:16Z DropDown-Navigation: Problem mit Menüpunktbreite <blockquote> <p>Hi,</p> <blockquote> <p>Das Framework ist dazu da, um das DropDown Menü flüssig ausfahren zu lassen<br> Du meinst wohl eher zähflüssig. ;-)<br> Und um den Besucher beim Menü unnötig warten zu lassen, muss er auch noch 91kb JS-Code laden...</p> </blockquote> <blockquote> <p>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.<br> 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.</p> </blockquote> <p>freundliche Grüße<br> Ingo</p> </blockquote> <p>Ok Ingo, hast mich überzeugt. Dann halt ein CSS-basiertes DropDown-Menü. Was mich dann auch gleich zum nächsten Problem führt:</p> <p>Ich habe das <a href="http://www.htmldog.com/articles/suckerfish/dropdowns/" rel="nofollow noopener noreferrer">Suckerfish-DropDown</a> 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.</p> <pre><code class="block language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nav<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Hauptmenüpunkt 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Link 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Link 2 extra long<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Link 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Link 4<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Link 5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Link 6<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Link 7<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Link 8<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Hauptmenüpunkt 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Link 1 extra long long<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Link 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Link 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Hauptmenüpunkt 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Link 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Link 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Link 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> </code></pre> <p>das zugehörige CSS</p> <pre><code class="block language-css"> <span class="token selector">#nav, #nav ul</span> <span class="token punctuation">{</span> padding<span class="token punctuation">:</span> 0<span class="token punctuation">;</span> margin<span class="token punctuation">:</span> 0<span class="token punctuation">;</span> list-style<span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#nav a</span> <span class="token punctuation">{</span> display<span class="token punctuation">:</span> block<span class="token punctuation">;</span> margin-right<span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> <span class="token comment">/* width: 10em; */</span> <span class="token punctuation">}</span> <span class="token selector">#nav li</span> <span class="token punctuation">{</span> float<span class="token punctuation">:</span> left<span class="token punctuation">;</span> <span class="token comment">/* width: 10em; */</span> <span class="token punctuation">}</span> <span class="token selector">#nav li ul</span> <span class="token punctuation">{</span> position<span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token comment">/* width: 10em; */</span> left<span class="token punctuation">:</span> -999em<span class="token punctuation">;</span> background-color<span class="token punctuation">:</span> #ffffff<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#nav li:hover ul, #nav li.sfhover ul</span> <span class="token punctuation">{</span> left<span class="token punctuation">:</span> auto<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Danke für die Hilfe!</p> https://forum.selfhtml.org/self/2008/sep/9/dropdown-navigation-problem-mit-menuepunktbreite/1287589#m1287589 Ingo Turski selfhtml2008b@ingo-webdesign.de http://www.1ngo.de/web/ 2008-09-10T13:25:35Z 2008-09-10T13:25:35Z DropDown-Navigation: Problem mit Menüpunktbreite <p>Hi,</p> <blockquote> <blockquote> <p>Hi,<br> »»</p> </blockquote> </blockquote> <p>full quote muss doch nicht sein, oder?</p> <blockquote> <p>Ok Ingo, hast mich überzeugt. Dann halt ein CSS-basiertes DropDown-Menü.</p> </blockquote> <p>schön; hätte ich gar nicht mit gerechnet...</p> <blockquote> <p>Leider werden die Untermenüpunkte nun alle nebeneinander statt untereinander dargestellt.</p> </blockquote> <p>Und das wundert Dich bei:</p> <blockquote> <pre><code class="block language-css"></code></pre> </blockquote> <blockquote> <p>#nav li {<br> float: left;<br> /* width: 10em; */<br> }</p> </blockquote> <pre><code class="block">? 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)] </code></pre> https://forum.selfhtml.org/self/2008/sep/9/dropdown-navigation-problem-mit-menuepunktbreite/1287590#m1287590 DonutPanic 2008-09-10T13:42:06Z 2008-09-10T13:42:06Z DropDown-Navigation: Problem mit Menüpunktbreite <p>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!</p>