[CSS] Dropdown niet zoals ik wil

[Verwijderd]

Hi,

Ik ben bezig met een dropdown menu, maar deze wil niet worden zoals ik dat wil, vandaar dat ik jullie hulp inschakel.

Code is hier te bezichtigen en te wijzigen: 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.

[C0rnelis]

Je hebt nogal wat styles die ongewenst worden overgenomen door de ul/li/a-elementen in je dropdown, een oplossing is om een aantal van die styles te resetten, maar nog veel netter is om met meer classes te gaan werken zodat je gericht je styles kunt toepassen op de elementen die het nodig hebben.

http://jsfiddle.net/GV38v/2/

Als je de ul in je li al een class meegeeft (bijv. sub-nav kan je een aantal styles annuleren).

Cascading Stylesheet:

#nav .sub-nav {
    height: auto; /* reset height of 55px; */
    box-shadow: none; /* remove box-shadow */
}

#nav ul li:hover ul li { /* this statement is overruling #nav .sub-nav li so can't use it below */
    background: white; /* use white instead of #ccc for the space between li's */
}

#nav .sub-nav li {
    margin: 0;
    padding-bottom: 2px; /* this is the space that will be white while the rest will show up #ccc */
}

#nav .sub-nav li:last-child {
    padding-bottom: 0;
}

#nav .sub-nav li a {
    background: #ccc; /* move #ccc for the background from the li to the a */
    border-right: none; /* remove the border from the a elements in the submenu */
}

Dus: kijk eens heel goed naar waar je css classes te pas kunt toepassen of te onpas al hebt gebruikt. En gebruik ook een tool zoals Chrome developer tools/firebug of iets dergelijks: je kunt dan in een oogopslag zien welke styles actief zijn op een bepaald element en ermee spelen.

[Verwijderd]

Bedankt, ik zal er zeker naar gaan kijken en meer over leren.