Mouse hover submenu

问题:

How can I make the submenus "PROGRAMMATION" and "RÉSEAUTIQUE" visible when the mouse is hovering over the link of the parent "MON PROGRAMME"?

This is the html code:

<div class="menu">          
<ul>            
    <li><a href="Index.html">ACCUEIL</a></li>
    <div class="sousMenu">
        <li><a>MON PROGRAMME</a>
            <ul>
                <li><a href="Programmation.html">PROGRAMMATION</a></li>
                <li><a href="Reseautique.html">RÉSEAUTIQUE</a></li>
            </ul> 
        </li>
    </div>
    <li><a href="College.html">MON COLLÈGE</a></li>
    <li><a href="Apropos.html">À PROPOS</a></li>                
</ul>           
</div>

And here is my CSS code:

.sousMenu:hover li a  > li ul li
{
    display: block;
}

.sousMenu li ul li
{
    position: absolute;
    top: 40px;
    display: none;
    list-style-type: none;
}

回答1:

Change your HTML to this:

<div class="menu">          
<ul>            
    <li><a href="Index.html">ACCUEIL</a></li>
    <li class="sousMenu"><a>MON PROGRAMME</a>
        <ul>
            <li><a href="Programmation.html">PROGRAMMATION</a></li>
            <li><a href="Reseautique.html">RÉSEAUTIQUE</a></li>
        </ul>
    </li>
    <li><a href="College.html">MON COLLÈGE</a></li>
    <li><a href="Apropos.html">À PROPOS</a></li>                
</ul>
</div>​

And your css to this:

.sousMenu:hover ul {
    display: block;
}
.sousMenu ul {
    top: 40px;
    display: none;
    list-style-type: none;
}​

You can see it works here: http://jsfiddle.net/AuJeF/