鼠标悬停子菜单 [英] Mouse hover submenu

问题描述

当鼠标悬停在父级MON PROGRAM的链接上时，如何显示子菜单PROGRAMMATION和RÉSEAUTIQUE？

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

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代码：

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

推荐答案

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

b
$ b

And your css to this:

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

您可以看到它在这里工作： http://jsfiddle.net/AuJeF/

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

这篇关于鼠标悬停子菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！