en hover i mozilla uppför sig märkligt - varför?

2 svar · 281 visningar · startad av LenaFena 10 mars 2008

LenaFenaMedlem sedan mars 20082 inlägg

Frågan10 mars 2008 09:29#1

Jag har två menyrader enligt följande:

/* top-meny */
#menycontainer {padding: 0 0 0 0; margin: 0; width: 300px; float: right; }
#menycontainer ul {margin: 0; padding: 45px 0 0 0; }
#menycontainer li {display: inline; list-style: none; float: right; padding: 0 0 0 0; color: #4B6578;}
.menycontent {display: block; padding: 7px 10px 7px 10px; background: #4B6578; color: #ffffff; text-align: center; border-right: 1px solid #ffffff; }
a.meny, a.meny:visited {width: 70px; display: block; text-decoration: none;}
a.meny:hover {background: transparent;}
a.meny:hover .menycontent {background: #99B0BF;}
/* slut top-meny */

/* main-meny */
#menycontainer2 {padding: 0 0 0 0; margin: 0; width: 100%; float: right; }
#menycontainer2 ul {margin: 0; padding: 20px 0 0 0; width: 100%}
#menycontainer2 li {display: inline; list-style: none; float: right; padding: 0 0 0 0; color: #4B6578;}
.menycontent2 {display: block; padding: 20px 20px 20px 20px; background: #4B6578; color: #ffffff; text-align: center; border-right: 1px solid #ffffff; }
a.meny2, a.meny2:visited {width: 100%; display: block; text-decoration: none;}
a.meny2:hover {background: transparent;}
a.meny2:hover .menycontent2 {background: #99B0BF;}
a#current .menycontent2 { background: #99B0BF;}

Båda fungerar utmärkt i IE, men i mozilla beter sig den övre menyn (top-menu) märligt i hover-läge. Fägen på länken slår inte om förrän jag pekar ganska högt upp på den, dvs ovanför själva texten.

Vad har jag gjort för fel?

här finns sidan: https://www.balkanbusinessgroup.com

Tacksam för svar :)

joserMedlem sedan mars 20021 152 inlägg

12 mars 2008 10:23#2

Utifrån din postade kod: Enklaste lösningen är att få list-boxen att omsluta sitt innehåll:

#menycontainer ul {margin: 0; padding: 45px 0 0 0; overflow:hidden}

headbugMedlem sedan sep. 2006867 inlägg

12 mars 2008 13:11#3

Att du inte "kommer åt" övre menyn förrän ganska långt upp beror på att du har en padding-top på 20px på din UL i menycontainer2 som lägger sig över din andra meny.

Det blir alldeles uppenbart om du installerar fireFox och web-utvecklarverktyget FireBug (ett måste i varje hemsidesnickrares arsenal, tillsammans med Web developer toolbar :) )

Om du inte kan eller vill ändra hur du styr din positionering kan du styra så att menycontainer2 får ett annat z-värde, dvs du kan lägga menycontainer2 UNDER den övre menyn och på så sätt blir den övre inte blockerad.

Men jag skulle nog rekommendera dig att strama upp koden lite, och till exempel så om du endast använder diven "menycontainer" till att omsluta en ren UL kan du skippa diven och ge din UL id:t istället... Så blir det lite lättare att hålla reda på vilken padding/margin som spökar för tillfället!