Heren en dames,

Ik ben bezig met een CSS menu waarin ook een submenu zit. Het is uiteraard de bedoeling dat het submenu netjes onder het betreffende hoofdmenu item komt.

Nu is het probleem dat de menuknoppen allemaal een andere afmeting hebben, waardoor ik niet simpelweg met margins de juiste positie kan bepalen. Is er een manier om het submenu item altijd tegen de linkerzijde van het hoofdmenu item te laten uitlijnen?

Ik zou zeggen google gewoon naar een bestaande jquery submenu waar het al in zit, net zo makkelijk

Ik heb geen verstand van jquery en de klant wil nogal een specifieke vormgeving dus vandaar. Het is overigens een Wordpress site dus de oplossing moet werken met wp_nav.

Maar, vanuitgaand dat je goed nest:

Code:

<ul>
     <li>Item 1</li>
     <li>Item met sub
          <ul>
               <li>Sub item 1</li>
               <li>Sub item 2</li>
          </ul>
     </li>
</ul>

Je kunt dan toch gewoon het submenu positioneren 'onder' hun parent list item? (position absolute, bijvoorbeeld?).

Gooi je html en css even in http://jsfiddle.net.

Ze staan ook wel onder het parent item, maar op de een of andere manier aan de rechterzijde van het parent item. Ze moeten verhuizen naar de linkerzijde (of gecentreerd).

Als de buttons nu een vaste breedte gehad zouden hebben had ik ze met een negatieve margin-left op de juiste plek kunnen zetten maar aangezien de buttons hun breedte aanpassen op de tekst die erin staat gaat dat niet lukken.

Origineel gepost door Marcel Melis

Ze staan ook wel onder het parent item, maar op de een of andere manier aan de rechterzijde van het parent item. Ze moeten verhuizen naar de linkerzijde (of gecentreerd).

Als de buttons nu een vaste breedte gehad zouden hebben had ik ze met een negatieve margin-left op de juiste plek kunnen zetten maar aangezien de buttons hun breedte aanpassen op de tekst die erin staat gaat dat niet lukken.

Zonder code kunnen we moeilijk zien wat je verkeerd doet.

Code:

li ul li{
   display:block;
   position:absolute;
   left:0;
   top:0;
}

En dan vanzelfsprekend top even goed aanpassen, en evt een width meegeven als je dat mooier vind, etc, etc.

?

Origineel gepost door Job van S.

Gooi je html en css even in http://jsfiddle.net.

- Probleem opgelost, linkje weer weggehaald aangezien hier ook de url van de testwebsite stond -

Origineel gepost door Marcel Melis

En dan? Probleem blijft daar hetzelfde...

En dan de link hier plaatsen (klik eerst op save).
Aanvullend bericht:
Toevoegen:

Code:

#menuboven li { position: relative; }
#menuboven li:hover ul { left: 0; }

Uitleg:
Als je een element absoluut positioneert, doe je dat ten opzichte van het dichtstbijzijnde parent element dat anders dan static gepositioneerd is. In dit geval #menuboven (position: relative;). Als je #menuboven li ook relatief positioneert wordt dat de dichtstbijzijnde. Nu kun je met left: xx; en top: xx; de positie van #menuboven ul veranderen ten opzichte van #menuboven li.

Yes, that's it! Dank je Job!

PS bedankt voor de uitleg. Ik positioneer elementen meestal met float en dan margins om de exacte positie te bepalen, werkt in de meeste gevallen prima maar nu even niet ;-)
Aanvullend bericht:
Nog even een aanvullend vraagje. Het hoofdmenu item heeft een afwijkende opmaak (zowel achtergrond als tekst) bij hover.

Wanneer ik vervolgens de muis naar het submenu item breng blijft de achtergrondopmaak van het hoofdmenu item wel actief maar de opmaak van de tekst (een hyperlink) niet.

De vraag is natuurlijk duidelijk: hoe zorg ik ervoor dat de hover opmaak van de hyperlink in het hoofdmenu ook bewaard blijft als ik naar het submenu item ga?
Aanvullend bericht:
Niemand een oplossing voor mijn laatste vraag?