Uitklapmenu

[KREEFTMEIJER]

Uitklapmenu , als ik op portfolio of contact klik verspringt de uitgeklapte ul.
Heeft vermoedelijk iets met padding te maken , kom er na drie uur knutselen niet uit.
Wie heeft goede raad.
www.artediamici.nl/nieuws.php

Groet,
Henk

 

[csshunter]

Hoi Henk,
Inderdaad, de padding voor de submenu-blokken moet er uit:

#menu ul {
    padding: 0;
}

======
Of anders als alternatief:

#menu ul li {
    position: absolute;
    left: 0;
}

Toelichting
Hiermee worden de <li>'s van de submenu's bediend.
De <li>'s van het hoofdmenu hebben al een {position:relative}.
De {position: absolute} van de <li>'s van de submenu's zorgt ervoor dat ze niet de rest van de pagina-inhoud wegduwen (net als een float komen ze buiten de "normal flow" van de pagina-html te liggen).
De eerder opgegeven float voor alle <li>'s is nu buiten werking voor deze etage, evenals de padding van de <ul> van de submenu's: ook daaruit zijn ze losgeschroefd door hun absolute positie.
De {left: 0} zorgt ervoor dat de left op hetzelfde punt begint als de left van het eerste omvattende element element dat een {position: relative} heeft.
Dat is dus telkens een <li> van het hoofdmenu, en dan komen de submenu's mooi uitgelijnd daaronder.

Met vriendelijke groet,
CSShunter

 

[KREEFTMEIJER]

Nu dit probleem is opgelost, ontstaat het volgende, het menu staat nu niet meer in het midden.

Groet,
Henk

 

[csshunter]

Ja, dat klopt; want je hebt nu van alle <ul>'s de padding weggehaald, ook van de <ul> van het hoofdmenu.
Die <ul> heeft de id="menu" en de padding kan terugkomen met:

#menu { 
    padding-left: 220px;
    }

Dat heeft dan geen consequenties voor de submenu-<ul>'s, want die hebben niet dat id.

 

[KREEFTMEIJER]

Hartelijk dank, het werkt nu voortreffelijk.
Ik maakte de fout om de left-padding op 220 px te zetten in de menu ul.
Vandaar dat het aan de wandel ging.

Nogmaals dank, ook voor de uitleg.
Groet,
Henk