Tha_Zaynt Skrevet 8. august 2005 Del Skrevet 8. august 2005 (endret) Jeg driver å lager en meny, der jeg har en submeny. på submenyen legger jeg til en class på <li> for at den skal se annerledes ut. Problemet er at jeg har satt a:hover på #meny li så denne overstyrer #meny .submeny a:hover. Det underlige er at det bare er color som blir overstyrt (altså skriftfargen på linken ved a:hover), men alt det andre fungerer. Demo her <ul id="menu"> <li><a href="index.php">Hjem</a></li> <li><a id="current" href="index.php?sub=1">Turneringer</a></li> <li class="submeny"><a href="index.php">WoW</a></li> <li class="submeny"><a href="index.php">Counter-Strike</a></li> <li class="submeny"><a href="index.php">Half-Life</a></li> <li><a href="index.php">Forum</a></li> <li><a href="index.php">Medlemmer</a></li> <li><a href="index.php">Registrer</a></li> <li><a href="index.php">FAQ</a></li> <li><a href="index.php?sub=2">Om SpillOnline</a></li> </ul> #menu li{ margin-left: -9px; background: url(images/backmenu.jpg) repeat-x; padding-left: 10px; border-bottom: 1px solid #848484; height:19px; width:109px; display: block; } #menu li a{ color: #333; text-decoration: none; display: block; } #menu li a:hover{ color: #fff; margin-left: -10px; padding-left: 10px; background: url(images/backmenuhover.jpg) repeat-x; height:19px; width:109px; display: block; text-decoration: none; } #menu #current{ color: #ffffff; margin-left: -10px; padding-left: 10px; background: url(images/backmenuhover.jpg) repeat-x; height:19px; width:109px; display: block; text-decoration: none; } #menu .submeny{ background: #FFF; border-bottom: 1px solid #848484; } #menu .submeny a:hover{ display: block;¨ color: #333; background: #EEE; border-bottom: 1px solid #848484; } Endret 11. august 2005 av Tha_Zaynt Lenke til kommentar
Tha_Zaynt Skrevet 8. august 2005 Forfatter Del Skrevet 8. august 2005 ingen som vet hvorfor #menu li a:hover overstyrer #menu .submeny a:hover når det gjelder color? Lenke til kommentar
Jakob K Skrevet 8. august 2005 Del Skrevet 8. august 2005 Tha_Zaynt skrev: Jeg driver å lager en meny, der jeg har en submeny. på submenyen legger jeg til en class på <li> for at den skal se annerledes ut. Problemet er at jeg har satt a:hover på #meny li så denne overstyrer #meny .submeny a:hover. Det underlige er at det bare er color som blir overstyrt (altså skriftfargen på linken ved a:hover), men alt det andre fungerer. Prøv dette: <ul id="menu"> <li><a href="index.php">Hjem</a></li> <li><a id="current" href="index.php?sub=1">Turneringer</a></li> <ul> <li><a href="index.php">WoW</a></li> <li><a href="index.php">Counter-Strike</a></li> <li><a href="index.php">Half-Life</a></li> </ul> <li><a href="index.php">Forum</a></li> <li><a href="index.php">Medlemmer</a></li> <li><a href="index.php">Registrer</a></li> <li><a href="index.php">FAQ</a></li> <li><a href="index.php?sub=2">Om SpillOnline</a></li> </ul> #menu li { margin-left: -9px; background: url(images/backmenu.jpg) repeat-x; padding-left: 10px; border-bottom: 1px solid #848484; height: 19px; width: 109px; display: block; } #menu li a { color: #333; text-decoration: none; display: block; } #menu li a:hover{ color: #fff; margin-left: -10px; padding-left: 10px; background: url(images/backmenuhover.jpg) repeat-x; height:19px; width:109px; display: block; text-decoration: none; } #menu #current { color: #ffffff; margin-left: -10px; padding-left: 10px; background: url(images/backmenuhover.jpg) repeat-x; height:19px; width:109px; display: block; text-decoration: none; } #menu ul { background: #FFF; border-bottom: 1px solid #848484; } #menu ul a:hover { display: block; color: #333; background: #EEE; border-bottom: 1px solid #848484; } Ser nå at feilen sansyneligvis er en overflødig «¨» i femte siste linje, men dette blir mer riktig uansett Lenke til kommentar
Tha_Zaynt Skrevet 11. august 2005 Forfatter Del Skrevet 11. august 2005 Du hadde rett i at det var en " som var feilen, men jeg gikk for ditt forslag jeg men uanset....nå har jeg støtt på et nytt problem. Jeg har lagt til piler på submenyen som funker fint ved normalt, men ikke ved :hover. Problemet er at paddingen som er satt i #sub li a ikke gjelder i #sub li a:hover. Bare se her: Demo koden ser nå slik ut: <ul id="menu"> <li><a href="index.php">Hjem</a></li> <li><a id="current" href="index.php?sub=1">Turneringer</a></li> <ul id="sub"> <li><a href="index.php">WoW</a></li> <li><a href="index.php">Counter-Strike</a></li> <li><a href="index.php">Half-Life</a></li> </ul> <li><a href="index.php">Forum</a></li> <li><a href="index.php">Medlemmer</a></li> <li><a href="index.php">Registrer</a></li> <li><a href="index.php">FAQ</a></li> <li><a href="index.php?sub=2">Om SpillOnline</a></li> </ul> #menu li{ margin-left: -9px; background: url(images/backmenu.jpg) repeat-x; padding-left: 10px; border-bottom: 1px solid #848484; height:19px; width:109px; display: block; } #menu li a{ color: #333; text-decoration: none; display: block; } #menu li a:hover{ color: #fff; margin-left: -10px; padding-left: 10px; background: url(images/backmenuhover.jpg) repeat-x; height:19px; width:109px; display: block; text-decoration: none; } #sub li{ background: url(images/pil.gif) no-repeat 8% 50% #EFEFEF; border-bottom: 1px solid #848484; padding-left: 10px; } #sub li a{ padding-left: 10px; } #sub li a:hover{ color: #333; background: url(images/pil.gif) no-repeat 8% 50% #FFF; border-bottom: 1px solid #848484; } Lenke til kommentar
Jakob K Skrevet 11. august 2005 Del Skrevet 11. august 2005 Hva skjer om du legger til padding-left: 10px; under #sub li a:hover også? Lenke til kommentar
Tha_Zaynt Skrevet 11. august 2005 Forfatter Del Skrevet 11. august 2005 Har satt padding-left: 10px; på a:hover nå, men det gjorde ingen forskjell. Lenke til kommentar
Tha_Zaynt Skrevet 12. august 2005 Forfatter Del Skrevet 12. august 2005 ingen som har forslag til hvorfor paddingen ikke gjør noe utslag? Lenke til kommentar
Anbefalte innlegg
Opprett en konto eller logg inn for å kommentere
Du må være et medlem for å kunne skrive en kommentar
Opprett konto
Det er enkelt å melde seg inn for å starte en ny konto!
Start en kontoLogg inn
Har du allerede en konto? Logg inn her.
Logg inn nå