[CSS/HTML] Menu hover textkleur werkt niet?

[Angeloonie]

Ik heb een mouse over menu op een site, en als je de muis op een link zet wordt de tekst wit, en de achtergrond groen, alleen als je muis niet meer op de link zelf is, dan blijft de tekst zelf groen. Ik ben alles nagelopen en ik kan er echt niet achter komen wat de oorzaak hiervan kan zijn.

de site is te vinden op http://www.crazy4angie.com/tz/


Hier een stukje menu waar bij de class="folder" link wel goede tekstkleuren weergeeft (alleen de folder link, de inhoud zelf weer niet.

code:

<ul id="menu">
        <li class="none">
            <a href="index.html">Home</a>
        </li>
        <li class="folder">Info
            <ul>
                <li>
                    <a href="about.html">About Me</a>
                </li>
                <li>
                    <a href="about.html">Contact Info</a>
                </li>
            </ul>
        </li>
</ul>

Hier de CSS die het allemaal hoort te regelen:

code:

a:hover { color:#ffffff; }

ul, li {
    margin:0;
    padding:0;
    display:block;
}  

ul {
    list-style:none;
    width:150px;
    padding:2px;
    border:1px solid #333333;
    background:#ffffff;
} 

li {
    position:relative;
    padding:3px;
    background:#ffffff;
    border:1px solid #ffffff;
    border-right:5px solid #ffffff;
    z-index:9;
}
 
li.folder {
    background:url(br1.gif);
    background-repeat:no-repeat;
    background-position:right;
}

li:hover {
    border:1px solid #333333;
    background:#99CC33;
    z-index:15;
    color:#ffffff;
}

  
ul ul {
    position:absolute;
    display:none;
    right:-140px;
    top:4px;
}
  
  
li:hover ul ul {
    display:none;
}

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

Heeft iemand enig idee hoe het komt, en eventueel ook een oplossing? Ik kom er echt niet meer uit..

[ Voor 9% gewijzigd door Angeloonie op 21-08-2005 12:54 ]

[Amras]

Dat komt omdat <a> een inline element is en dus niet over de gehele <li> wordt uitgerekt. Een display:block op de <a> elementen zou dit op moeten lossen.

[Zoefff]

Idd. Volgens mij kan je het ook oplossen met

Cascading Stylesheet:

li:hover a {
    color: #FFFFFF;
}

Maar als ik er zo over nadenk heeft het uitrekken van het a element meer zin, omdat je er dan ook over de gehele breedte op kan klikken, dus

Cascading Stylesheet:

li a {
    display:block;
    width:150px;
}

[ Voor 52% gewijzigd door Zoefff op 21-08-2005 14:21 ]

[Angeloonie]

Thanks, het werkt nu