Dropdown-Menü zu schmal

[Fabian]

Hallo,

ich versuche gerade ein Dropdown-Menü mit CSS zu gestalten. Ansatz dabei ist eine Konstruktion wie:

  
<ul class="navigation">  
  <li>Zahlenmenü  
    <ul>  
      <li><a>1</a></li>  
      <li><a>2</a></li>  
      ...  
    </ul>  
  </li>  
  ...  
</ul>

Und der entsprechende CSS-Code wäre dann:

ul#bible_navigation li{  
	list-style: none;  
}  
ul#navigation>li{  
	display: inline-block;	  
}  
ul#navigation>li>ul{  
	display: none;  
	position: absolute;  
	padding: 0;  
	overflow: auto;  
	max-height: 40em;  
}  
ul#navigation>li:hover>ul{  
	display: block;  
}

Das Problem an der ganzen Sache ist, dass die aufklappbaren Menüs (ul#navigation>li>ul) ein kleines Stück zu schmal sind; gerade so, dass es breit genug wäre, wenn die Scrollbalken nicht da wären, scheint mir. overflow: scroll ändert daran nichts.

Getestet mit FF und Iron, aktuelle stabile Version. Woran liegt das, und kann ich die irgendwie breiter machen, dass sie nicht breiter als nötig werden, aber auch nicht den Text abschneiden?

Grüße,
Fabian.

[ChrisB]

Hi,

Das Problem an der ganzen Sache ist, dass die aufklappbaren Menüs (ul#navigation>li>ul) ein kleines Stück zu schmal sind; gerade so, dass es breit genug wäre, wenn die Scrollbalken nicht da wären, scheint mir.

Welche Scrollbalken?
Ich kann mir das Problem gerade nicht wirklich vorstellen - hast du mal ein Online-Beispiel?

Zum gezeigten Code kann ich höchstens anmerken, dass absolute Positionierung ohne jegliche Angabe irgendwelcher Bezugspunkte ggf. andere Ergebnisse haben kann, als du vielleicht annimmst.

MfG ChrisB

[Fabian]

Hallo,

Hier ein Bild davon, wie das ganze bei mir aussieht:

Wie Du siehst, ist der Eintrag "Apostelgeschichte" in der Mitte der Liste abgeschnitten. Das ist unschön. Ich hätte gerne, dass das Menü so breit ist, wie der längste Eintrag darin.

Ein online-Beispiel habe ich leider nicht, Aber ich habe mal den Quellcode einer Beispielseite samt Stylesheet hochgeladen: Pastebin. Die Definitionen für das Menü sind ganz unten im Style-Tag. Ich habe einfach mal alles so gelassen, wie es ist.

Grüße,
Fabian.

[ChrisB]

Hi,

Wie Du siehst, ist der Eintrag "Apostelgeschichte" in der Mitte der Liste abgeschnitten. Das ist unschön. Ich hätte gerne, dass das Menü so breit ist, wie der längste Eintrag darin.

Ein padding-right von 1em für ul#bible_navigation>li>ul behebt das Problem (getestet in Firefox und Chrome).
Eine Hintergrundfarbe muss dann allerdings auch noch angegeben werden, sonst scheint links vom Scrollbalken komischerweise in einem schmalen Streifen der Hintergrund durch.

Btw., die max-height von 40em kann je nach Höhe des Viewports natürlich über den sichtbaren Bereich hinaus gehen, was dann extrem unschön zu bedienen ist.
Und selbst ohne diesen Faktor sind solche Scrollbereiche innerhalb eines größeren, ebenfalls scrollbaren Dokumentes generell fragwürdig, weil bspw. beim Scrollen mit dem Mausrad beim Erreichen des „Scroll-Endes“ des inneren Bereiches dann zum Scrolling des darum liegenden Dokumentes übergegangen wird. Finde ich persönlich extrem unschön.

MfG ChrisB

[Fabian]

Hallo,

die Idee mit dem Padding für das innere ul sorgt schon einmal dafür, dass die Texte nicht mehr abgeschnitten werden. Eine Hintergrundfarbe anzugeben löst das Problem aber nicht, ja die alternierende Hintergrundfarbe der lis nicht fortgesetzt wird:

Außerdem werden Einträge immer noch unschön umgebrochen (1. und 2. Tessalonicher). Das Problem scheint ja irgendwo da zu liegen, dass die li-Elemente nicht mehr so breit sind wie nötig, wenn der umgebende Container auf overflow: auto oder scroll gesetzt ist. Mit show oder hidden haben die Elemente die richtige Länge.

Die Festsetzung auf 40em Maximale Höhe ist tatsächlich dumm, das muss ich zugeben. Was ist aber deine Alternative zu den scrollbaren Untermenüs? Alle Menüelemente sichtbar zu machen verschlingt meiner Meinung nach sehr viel Platz und macht das alles nicht übersichtlicher.

Das Problem das du nanntest, dass zum Scrollen im Übergeordneten Container (sprich body) übergegangen wird, ist natürlich ein Argument. Firefox macht das zum Glück erst, wenn man die Maus bewegt. Bei anderen ist dem leider nicht so. Was schlägst Du stattdessen vor?

Grüße,
Fabian.

[MudGuard]

Hi,

die Idee mit dem Padding für das innere ul sorgt schon einmal dafür, dass die Texte nicht mehr abgeschnitten werden. Eine Hintergrundfarbe anzugeben löst das Problem aber nicht, ja die alternierende Hintergrundfarbe der lis nicht fortgesetzt wird:

Und wenn Du das Padding den li-Elementen in diesem ul gibst?

cu,
Andreas

[Fabian]

Löst es das Problem nicht. Es passen zwar alle Inhalte hinein, aber es bleiben hässliche Scrollbalken, die nicht nötig wären. Die li-Elemente sind weiterhin breiter als das ul-Element.

MfG,
Fabian.