CSS-Dropdown-Menü mit gleicher Breite (wie Parent)

vega · #1 (**permalink**) 30.10.2014, 11:05

Hi Leute,

ich habe ein Problem mit einem Dropdown-Menü, dem ich
eine feste Breite zugewiesen habe, damit es so breit ist wie
der Parent. Allerdings ist das nur ein Schätzwert, da ich das
dynamisch halten möchte.

So ist das Problem: Sobald also jemand eine andere Schrift
verwendet, ist der Dropdown-Balken breiter oder schmaler
und das sieht nicht schön aus.

WP:

Code:

		<div id="obenrechts">
		<nav id="nav" role="navigation" class="gross">
			<?php wp_nav_menu( array('menu' => 'primary' ) ); ?>
		</nav>
		</div>

CSS:

Code:

#nav {display: block; float: left; margin: 0 auto; width: 100%; font-size: 0.75rem;}
#nav ul, div.menu ul {list-style: none; margin: 0; padding: 0;}
#nav li, div.menu li {float: left; position: relative;}
#nav ul ul {display: none; position: absolute; top: 3.4rem; left: 0; float: left; width: auto; z-index: 99999;}
#nav a {color: #333; display: block; padding: 0 1.1rem; text-decoration: none; font-weight: normal; background: rgba(255, 255, 255, .7); margin: 0 0 0 2px;}
#nav ul li:hover > ul {display: block;}
#nav li:hover > a, #nav ul ul :hover > a {color: #888; background: rgba(255, 255, 255, .9);}
     #nav ul ul a {background: rgba(255, 255, 255, .7); text-align: center; line-height: 1rem; width: inherit; padding: 10px 15px; height: auto; margin: 2px 0 0 2px}
#nav ul li.current_page_item > a, #nav ul li.current-menu-ancestor > a, #nav ul li.current

Die eingerückte Zeile ist das Dropdown-Element.

Ansehen kann man sich das testweise hier: studio-scs.de

Mit width: inherit; funktioniert es natürlich nicht, da das
Menü darüber ja auch keine feste Breite zugewiesen
bekommen hat.

Wisst ihr eine einfache Lösung dafür, ohne dass man dafür
JS oder so benötigt?

Vielen Dank vorab.

etux · #2 (**permalink**) 30.10.2014, 14:18

Zitat:

Zitat von vega

Mit width: inherit; funktioniert es natürlich nicht, da das
Menü darüber ja auch keine feste Breite zugewiesen
bekommen hat.

Der Browser kann die Breite der ul.submenu auf die Breite des Elternelements erstrecken, wenn Du für ul.submenu eine Breite von 100% notierst:
ul.submenu { width: 100%; }
„width: auto“ (was übrigens der default Wert ist) bei einem „absolute“ positioniertem Element, lässt das Element auf die Breite seines Inhaltes schrumpfen (shrink-to-fit).
Allerdings wird bei Dir die Breite im Moment per JavaScript errechnet und als inline-Style gesetzt. Das müsstest Du zuerst ändern.

Der Wert für „top“ kann übrigens auch 100% haben – so liegt die Oberkante der ul.submenu auf der Unterkante des Containing Blocks (Elternelement mit „position: relative“ - li-Element der ersten Menü-Ebene).

vega · #3 (**permalink**) 30.10.2014, 14:39

Zitat:

Zitat von etux

Der Browser kann die Breite der ul.submenu auf die Breite des Elternelements erstrecken, wenn Du für ul.submenu eine Breite von 100% notierst:
ul.submenu { width: 100%; }
„width: auto“ (was übrigens der default Wert ist) bei einem „absolute“ positioniertem Element, lässt das Element auf die Breite seines Inhaltes schrumpfen (shrink-to-fit).
Allerdings wird bei Dir die Breite im Moment per JavaScript errechnet und als inline-Style gesetzt. Das müsstest Du zuerst ändern.

Der Wert für „top“ kann übrigens auch 100% haben – so liegt die Oberkante der ul.submenu auf der Unterkante des Containing Blocks (Elternelement mit „position: relative“ - li-Element der ersten Menü-Ebene).

Also, das JS war nur ein Versuch, wobei ich dafür eigtl
kein JS einsetzen möchte. Das lösche ich jetzt erst einmal.

Danach meinst du, einfach nur dem ul.sub-menu li {width: 100%;}
geben, korrekt?

Okay, JS entfernt, aber mein ul.sub-menu li hatte ja sowieso schon
die width: 100%. Das hat also nicht zur Lösung geführt.

So habe ich es nun:

Code:

#nav {display: block; float: left; margin: 0 auto; width: 100%;}
#nav ul, div.menu ul {list-style: none; margin: 0; padding: 0;}
#nav li, div.menu li {float: left; position: relative;}
#nav ul ul {display: none; position: absolute; left: 0; float: left; width: auto; z-index: 99999;}
#nav ul.sub-menu li {float: none; width: 100%; display: block;}
#nav a {color: #333; display: block; padding: 0 1.1rem; text-decoration: none; font-weight: normal; background: rgba(255, 255, 255, .7); margin: 0 0 0 0.2rem; font-family: Dosis, Helvetica, Arial, sans-serif; font-size: 1rem;}
#nav ul li:hover > ul {display: block;}
#nav li:hover > a, #nav ul ul :hover > a {color: #888; background: rgba(255, 255, 255, .9);}
#nav ul ul a {background: rgba(255, 255, 255, .7); text-align: center; line-height: 1rem; padding: 10px 10px; height: auto; margin: 2px 0 0 0.2rem;}
#nav ul li.current_page_item > a, #nav ul li.current-menu-ancestor > a, #nav ul li.current-menu-item > a, #nav ul li.current-menu-parent > a {background: rgba(255, 255, 255, .9);}

etux · #4 (**permalink**) 30.10.2014, 14:46

Zitat:

Zitat von vega

Danach meinst du, einfach nur dem ul.sub-menu li {width: 100%;}
geben, korrekt?

Nein, bitte Vorbeitrag genauer lesen.

etux · #5 (**permalink**) 30.10.2014, 15:35

Zitat:

Zitat von etux

Nein, bitte Vorbeitrag genauer lesen.

… oder aber ich lese meinen Beitrag noch mal genauer.

Deine Klasse heißt nicht „submenu“, sondern „sub-menu“. Somit:
ul.sub-menu { width: 100%; }

Dennoch, auch mit der falschen Klasse wäre es klar gewesen, wo die Breite von „auto“ auf „100%“ geändert werden müsste.

vega · #6 (**permalink**) 30.10.2014, 15:48

Ach, herrje, alles klar, danke dir, funzt nun.

etux · #7 (**permalink**) 30.10.2014, 15:50

Bitte, gern.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
CSS Dropdown Navigations	Cueball	CSS	1	04.10.2012 05:42
CSS Menü verändern	Severa	CSS	1	12.09.2012 01:57
CSS Menü	MadBall	CSS	3	21.03.2010 03:04
DropDown Menü verschwindet	andre-ne	CSS	2	18.11.2009 10:44
HTML Content vor Menü, CSS soll das ändern, wie?	Geldmichel	CSS	6	08.12.2006 17:35