Dropdown doet niet wat ik verwacht
Ik heb daarnet een dropdown menu gemaakt, deze wordt echter boven mijn hoofdmenu getoond en staat ook in één lijn, dit moet onder elkaar komen te staan.
Zelf kon ik niet achter het probleem komen, heb mijn code al een paar keer gewijzigd en de dropdown helemaal opnieuw gedaan, maar kom er niet uit.
CSS en HTML hier te bezichtigen: http://jsfiddle.net/z79Ky/
Dat leest, kijkt en werkt toch veel gemakkelijker dan 244 lijnen met code?
Zie http://jsfiddle.net/z79Ky/
Toevoeging op 05/11/2013 21:59:14:
Mogelijke oplossing: je menu boven je logo zetten in je HTML? Zie http://jsfiddle.net/z79Ky/1/
Vind het wel raar dat je een container, een wrapper én een wrapper_cont(ent) hebt. Drie <div>'s voor 1 doel.
En waarom komt het logo niet in de wrapper?
Eddy E op 05/11/2013 21:56:19:
Gooi het nou toch eens in een Fiddle...
Dat leest, kijkt en werkt toch veel gemakkelijker dan 244 lijnen met code?
Zie http://jsfiddle.net/z79Ky/
Toevoeging op 05/11/2013 21:59:14:
Mogelijke oplossing: je menu boven je logo zetten in je HTML? Zie http://jsfiddle.net/z79Ky/1/
Vind het wel raar dat je een container, een wrapper én een wrapper_cont(ent) hebt. Drie <div>'s voor 1 doel.
En waarom komt het logo niet in de wrapper?
Dat leest, kijkt en werkt toch veel gemakkelijker dan 244 lijnen met code?
Zie http://jsfiddle.net/z79Ky/
Toevoeging op 05/11/2013 21:59:14:
Mogelijke oplossing: je menu boven je logo zetten in je HTML? Zie http://jsfiddle.net/z79Ky/1/
Vind het wel raar dat je een container, een wrapper én een wrapper_cont(ent) hebt. Drie <div>'s voor 1 doel.
En waarom komt het logo niet in de wrapper?
Ik heb:
een container voor de breedte van de pagina.
Een wrapper als header, dit is grijs.
Een wrapper_cont voor het logo.
Het logo staat een deel in het menu en in de wrapper, dit vind de eigenaar mooi. Jouw oplossing brengt de navigatie naar de top van de pagina en de wrapper/header omlaag, dit is iets wat de eigenaar niet wil.
position: absolute;
visibility: hidden;
top: 32px;
float: left;
}
Haal hier de float:left; uit de code. Deze zorgt er immers voor dat de display:block naast elkaar komen te staan
Steven Huynen op 05/11/2013 23:24:43:
#nav ul ul{
position: absolute;
visibility: hidden;
top: 32px;
float: left;
}
Haal hier de float:left; uit de code. Deze zorgt er immers voor dat de display:block naast elkaar komen te staan
position: absolute;
visibility: hidden;
top: 32px;
float: left;
}
Haal hier de float:left; uit de code. Deze zorgt er immers voor dat de display:block naast elkaar komen te staan
Dit heeft voor het effect geen verschil gemaakt. Ik heb overigens een werkend dropdown menu in JSfiddle gezet, misschien dat jullie daar iets mee kunnen: http://jsfiddle.net/rL8KP/
Edit: het probleem is opgelost. Loop nu echter tegen een ander probleem aan. Deze ben ik op dit moment aan het onderzoeken.
http://jsfiddle.net/GV38v/1
Het lijkt erop dat de eerste 'Link item' de stijl van het hoofdmenu overneemt en hierdoor uitpuilt, is goed te zien als je inzoomt. Dit hoort niet zo te zijn, en tevens is de witte lijn tussen de Link items verdwenen, deze wil ik ook graag weer terug hebben; het geheel zou er zou uit moeten zien.
Dit is hoe het er nu uit ziet.
http://jsfiddle.net/riagabel2/fYdEr/
Sorry las over het punt dat je de witte lijnen er tussen wou hebben. Dit kan worden gedaan aan de hand van een margin aan de onderkant aan de a's in het sub-menu. In het volgende voorbeeld heb ik dat ook verwerkt
http://jsfiddle.net/riagabel2/GV38v/5/
Gewijzigd op 08/11/2013 10:18:50 door Mike Koopman
Mike Koopman op 08/11/2013 10:16:05:
In de css moet de box-shadow voor het sub-menu worden uitgeschakeld is dit wat hoe je het eruit wilt laten zien?
http://jsfiddle.net/riagabel2/fYdEr/
Sorry las over het punt dat je de witte lijnen er tussen wou hebben. Dit kan worden gedaan aan de hand van een margin aan de onderkant aan de a's in het sub-menu. In het volgende voorbeeld heb ik dat ook verwerkt
http://jsfiddle.net/riagabel2/GV38v/5/
http://jsfiddle.net/riagabel2/fYdEr/
Sorry las over het punt dat je de witte lijnen er tussen wou hebben. Dit kan worden gedaan aan de hand van een margin aan de onderkant aan de a's in het sub-menu. In het volgende voorbeeld heb ik dat ook verwerkt
http://jsfiddle.net/riagabel2/GV38v/5/
Je tweede is precies wat ik wilde, zal je wijzigingen goed bekijken, en hier van leren. Bedankt!