Beste SiteDealers,

Graag jullie schijnend licht over het volgende (simpele) probleem. Ik ben bezig in CSS een hover-div te maken. Staat de gebruiker met zijn cursor op een link in de menu-bar, dan verschijnt er een grijs achtergrond. Mooi en stijlvol. Dat gaat prima, zolang de link waarop de cursor staat, niet hetzelfde is als de pagina waar de gebruiker nu op zit. Oftewel: als de pagina active is, gaat het fout. Dit is wat er gebeurt als ik op 'Contacts' ga staan, terwijl ik op de voorpagina zit.




Dit is wat er gebeurt als ik op de pagina 'Contacts' zit, en met de cursor op 'Contacts' ga staan.




Zoals je ziet, verschuift de div helemaal naar onderen. 'Contacts' zou op dezelfde hoogte moeten staan als 'Blog', en het achtergrond zou tot bovenaan moeten doorlopen.

Dit is mijn CSS:

Code:

sf-menu li:hover, .sf-menu li.sfHover, .sf-menu a:focus, .sf-menu a:hover {outline: none;
background:#f6f6f6;
height:80px;
margin-top:-36px;
line-height:76px;
bottom:-10px;
}
#atp_menu a:active {
color:#df1d89;
margin-top:-36px;
}

Zien jullie de fout? Mijn dank zal groot zijn :-).

Met vriendelijke groet,
Riccardo de Wit

Kun je een linkje plaatsen naar een voorbeeld of een jsfiddle aanmaken? Dat werkt makkelijker.

Als je nu goed naar je CSS kijkt, dan zie je dat er op de eerste regel meteen al een punt mist voor de sf-menu, en dat je hover/focus etc de CSS class sf-menu hebben terwijl de active state weer de CSS class atp_menu heeft. Dat komt niet echt logisch en consequent over. Maar zonder URL/jsfiddle valt er idd niets met zekerheid te zeggen.

De fout is niet zichtbaar in deze css.
Ergens anders in de stylesheet wordt de negatieve margin weer overruled door een margin 0.
Maar het hele menu zit wat css betreft niet lekker in elkaar. Her en der zijn paddings gezet om die vervolgens met een negative margin weer op te heffen.

Begin dan eens (na het maken van een backup) met een opgeschoond CSS?