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>