Gå til innhold

CSS problem med meny


Anbefalte innlegg

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 av Tha_Zaynt
Lenke til kommentar
Videoannonse
Annonse
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

Du hadde rett i at det var en " som var feilen, men jeg gikk for ditt forslag jeg :thumbup:

 

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

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 konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...