Html 鼠标悬停子菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14113109/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Mouse hover submenu
提问by user1236892
How can I make the submenus "PROGRAMMATION" and "RéSEAUTIQUE" visible when the mouse is hovering over the link of the parent "MON PROGRAMME"?
当鼠标悬停在父级“MON PROGRAMME”的链接上时，如何使子菜单“PROGRAMMATION”和“RéSEAUTIQUE”可见？
This is the html code:
这是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>
And here is my CSS code:
这是我的 CSS 代码：
.sousMenu:hover li a > li ul li
{
display: block;
}
.sousMenu li ul li
{
position: absolute;
top: 40px;
display: none;
list-style-type: none;
}
回答by Cliff Ribaudo
Change your HTML to this:
将您的 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>?
And your css to this:
而你的 css 是这样的：
.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/
你可以在这里看到它的工作原理：http: //jsfiddle.net/AuJeF/
