鼠标悬停子菜单答案

【问题标题】：Mouse hover submenu鼠标悬停子菜单
【发布时间】：2012-12-16 07:01:04
【问题描述】：

当鼠标悬停在父“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;
}

【问题讨论】：

那么，您希望下一个项目（如大学、提案）保持原位，而不是在出现子菜单时下降？你是想避免这种情况吗？ jsfiddle.net/Fmd8F

标签： html css menu hover

【解决方案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/

【讨论】：