html - 鼠标悬停子菜单

Question

当鼠标悬停在父“MON PROGRAMME”的链接上时，如何使子菜单“PROGRAMMATION”和“RÉSEAUTIQUE”可见？

这是html代码：

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

这是我的 CSS 代码：

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

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

Answer 1

将您的 HTML 更改为：

<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>​

而你的CSS：

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

你可以在这里看到它的工作原理：http: //jsfiddle.net/AuJeF/