CSS problem med meny

[Tha_Zaynt]

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

[Tha_Zaynt]

ingen som vet hvorfor #menu li a:hover overstyrer #menu .submeny a:hover når det gjelder color?

[Jakob K]

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

[Tha_Zaynt]

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;
}

[Jakob K]

Hva skjer om du legger til padding-left: 10px; under #sub li a:hover også?

[Tha_Zaynt]

Har satt padding-left: 10px; på a:hover nå, men det gjorde ingen forskjell.

[Tha_Zaynt]

ingen som har forslag til hvorfor paddingen ikke gjør noe utslag?