:hover på en "block"

[NisseMannH4X]

Jeg har denne css koden for linker i en meny:

 

ul li a {
display: block;
text-decoration: none;
color: #777;
background: #259BBF;
padding: 3px;
width: 10em;
border-bottom: 0;
}

 

Siden de er "display: block;" kan jeg vel få a:hover på knappene via css? Linkene blir vel da en slags boks med tekst inni? Kan jeg ikke da få bakgrunnsfargen til å endre seg ved a:hover?

 

Hele css'n:

 

ul {
 padding: 0;
 margin: 0;
 list-style: none;
 } 
 
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #259BBF;
padding: 3px;
width: 10em;
border-bottom: 0;
}


li {
 float: left;
 position: relative;
 width: 6.937em;
 height: 13px;
 display: block;
 text-transform: uppercase;
 text-decoration: strong;
 color: #FFFFFF;
 background: #259BBF;
 padding: 2px;
 font-family: "Verdana";
 font-size: 8pt;
 font-weight: bold;
 }

li ul {
 display: none;
 position: absolute; 
 top: 15px;
 left: 0;
 }

li > ul {
top: auto;
left: auto;
}

li:hover ul, li.over ul{ display: block; }

 

Html for litt av menyen:

 

<li>Forside 
           <ul>
             <li><a href="index.php">Forside</a></li>
             <li><a href="siste10.php">Siste 10 nyheter</a></li>
             <li><a href="alle.php">Alle nyheter</a></li>
           </ul>
         </li>

 

Eksemple på slik jeg vil ha det!

 

(Vet at jeg har hatt et par tråder til denne menyen min før, men det dreier seg jo om vidt forskjellige ting så startet en ny tråd for å få mer oppmerksomhet)¨

 

EDIT: Link til menyen som den er nå

Endret 12. januar 2005 av NisseMannH4X

[Steinmann]

tror jeg ville satt hoover på a elementet, og gitt den en høyde.

for så sette bakgrundsfargen på den.

det skal funke...

[PoleCat]

:hover på annet enn a-elementet vil uansett ikke fungere i IE. Hvorfor ikke sette hover til a?

[NisseMannH4X]

Hvor og hva skal jeg sette inn? (har ikke peiling skjønner du)

[Haraldson]

Du må lage en egen regel hvor du skriver slik:

ul li a:hover {

Deretter må du kopiere en del av koden fra vanlig a over til denne, men gjøre forandringer der du vil a:hover skal være annerledes osv.

[NisseMannH4X]

ok, takk for svar, det funker fint, menyen blir nå helt føkka i Opera, men skal se om jeg fikser det, kommer tilbake til det hvis jeg ikke klarer det.

 

En annen ting: Hva er koden for å får opprom mellom tekst/linker? horisontalt...

[NisseMannH4X]

Har nå fått menyen til å fungere helt perfekt i ie, men i Opera er det føkka, sikkert noe kode jeg har glemt... Kan noen skjekke denne linken i IE så ser dere hvordan den skal være. Men i Opera blir den bare helt "ødelagt"

 

har også et bilde av "situasjonen"

 

EDIT: har funnet ut (la ved svart bakgrunn som dere ser på linken over, på neddropsboksene) og ser jeg at det ikke er border rund hele boksen, ossen legger jeg til det?

 

Kan noen se feilen?

 

ul {
 padding: 0;
 margin: 0;
 list-style: none;
 } 
 
ul li a {
 float: left;
 position: relative;
 width: 10em;
 display: block;
 background: #259BBF;
 border-bottom: 0;
 padding: 3px;
}

ul li a:hover {
 float: left;
 position: relative;
 width: 10em;
 display: block;
 background: #33CCFF;
 border-bottom: 0;
 padding: 3px;
}
 
li {
 float: left;
 position: relative;
 width: 6.937em;
 height: 13px;
 display: block;
 color: #FFFFFF;
 background: #259BBF;
 padding: 2px;
 font-family: "Verdana";
 font-size: 8pt;
 font-weight: bold;
 text-transform: uppercase;
 text-decoration: strong;
 }

li ul {
 display: none;
 position: absolute; 
 top: 15px;
 left: 0;
 }

li > ul {
top: auto;
left: auto;
}

li:hover ul, li.over ul{ display: block; }

 

Hadde vært fint med litt hjelp...

Endret 12. januar 2005 av NisseMannH4X

[dan1el]

Vil påstå at din "li"-sak overstyrer din "ul li a"-sak.

 

Du trenger dessuten ikke å ha det samme i "ul li a" og "ul li a:hover", da ":hover" arver egenskaper fra "a".

[Haraldson]

Du trenger dessuten ikke å ha det samme i "ul li a" og "ul li a:hover", da ":hover" arver egenskaper fra "a".

Ahh... Riktig det, sløvt av meg.

[NisseMannH4X]

Har nå fiksa og rydda litt opp i css'n... men funker fortsatt ikke i Opera... Har lagt til svart bekgrunn på "blockene" så man bedre kan se hva som skjer...

 

Skjekk forskjellen mellom Opera og ie, det skal være slik som det er i ie

 

Skjønner ikke hvorfor den blåe "bakgrunnen" på boksen som detter ned bare vise på halve bokse i Opera, nedover på venstre side og halveis inn i mellom hver boks... er ikke slik i ie..

 

Link

 

ul {
 padding: 0;
 margin: 0;
 list-style: none;
 } 
 
ul li a {
 float: left;
 position: relative;
 width: 10em;
 display: block;
 background: #000000;
 padding: 3px;
 border: 1px solid #ccc;
 border-bottom: 0;
} 

ul li a:hover {
 background: #33CCFF;
}
 
li {
 float: left;
 position: relative;
 width: 6.937em;
 height: 13px;
 display: block;
 color: #FFFFFF;
 background: #259BBF;
 padding: 2px;
 font-family: "Verdana";
 font-size: 8pt;
 font-weight: bold;
 text-transform: uppercase;
 text-decoration: strong;
 }

li ul {
 display: none;
 position: absolute; 
 top: 15px;
 left: 0;
 }

li > ul {
top: auto;
left: auto;
}

li:hover ul, li.over ul{ display: block; }

Endret 12. januar 2005 av NisseMannH4X

[dan1el]

Hvorfor bruker du CSS både på LI og LI A...? Kanskje du burde gi de <li>-ene som kommer opp ved :hover en egen klasse slik at disse ikke klusser med resten?

[NisseMannH4X]

Jeg fannt en annen dropdown meny som fungere helt fint i alle browsere, men den går vertikalt, så lurer på ossen jeg skal snu den horisontalt..

 

Link

 

HTML:

 

<li><a href="#">Forsiden</a></li>
 
 <ul>
   <li><a href="#">Forsiden</a></li>
   <li><a href="#">Siste 10 nyheter</a></li>
   <li><a href="#">Alle nyheter</a></li>
 </ul>
 </li>

 

CSS:

 

ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
}

ul li {
position: relative;
}

li ul {
position: absolute;
left: 149px;
top: 0;
display: none;
}

ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff;
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
} 

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */

ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
border-bottom: 1px solid #ccc;
}

li:hover ul, li.over ul{ display: block; }

<ul id="nav">