Html 仅当鼠标悬停在 li 类 css 上时显示 ul 类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8452586/
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
Display a ul class when the mouse hovers over a li class css only
提问by Boardy
I am currently looking into developing a CSS only drop down menu. The idea is when the mouse hovers over a ul tag it will make another ul class appear.
我目前正在研究开发一个仅限 CSS 的下拉菜单。这个想法是当鼠标悬停在 ul 标签上时，它会出现另一个 ul 类。
Below is the code that I currently have.
下面是我目前拥有的代码。
HTML
HTML
<head>
<link href="nav.css" rel="stylesheet" type="text/css">
</head>
<ul class="nav">
<li class="topMenu"><a href="#">Home</a></li>
<ul class="subMenu" id="home">
<li><a href="#">Hello</a></li>
<li><a href="#">World</a></li>
</ul>
</ul>
CSS
CSS
.nav, .topMenu, .subMenu
{
position: relative;
list-style: none;
}
.topMenu
{
position: relative;
float: left;
}
.subMenu
{
display: none;
}
.topMenu a:hover + li
{
display: block;
background-color: blue;
}
The idea is that when the mouse hovers over the li class="topMenu" then the ul class="subMenu" id="home" should appear underneath.
这个想法是，当鼠标悬停在 li class="topMenu" 上时，ul class="subMenu" id="home" 应该出现在下面。
Ideally this should be only in a CSS format without requiring any javascript etc.
理想情况下，这应该只采用 CSS 格式，不需要任何 javascript 等。
Thanks for any help you can provide.
感谢您的任何帮助，您可以提供。
回答by Wex
All you really need to do is nest the <ul>within your <li>element.
您真正需要做的就是将 嵌套<ul>在您的<li>元素中。
<nav>
<ul>
<li><a href="#">Link</a></li>
<li>
<a href="#">Link</a>
<ul>
<li><a href="#">Submenu</a></li>
<li><a href="#">Submenu</a></li>
</ul>
</li>
<li><a href="#">Link</a></li>
</ul>
</nav>
Here's some CSS that will help you get started:
这里有一些 CSS 可以帮助您入门：
/* Resets */
nav a {
text-decoration: none;
font: 12px/1 Verdana;
color: #000;
display: block; }
nav a:hover { text-decoration: underline; }
nav ul {
list-style: none;
margin: 0;
padding: 0; }
nav ul li { margin: 0; padding: 0; }
/* Top-level menu */
nav > ul > li {
float: left;
position: relative; }
nav > ul > li > a {
padding: 10px 30px;
border-left: 1px solid #000;
display: block;}
nav > ul > li:first-child { margin: 0; }
nav > ul > li:first-child a { border: 0; }
/* Dropdown Menu */
nav ul li ul {
position: absolute;
background: #ccc;
width: 100%;
margin: 0;
padding: 0;
display: none; }
nav ul li ul li {
text-align: center;
width: 100%; }
nav ul li ul a { padding: 10px 0; }
nav ul li:hover ul { display: block; }
Preview: http://jsfiddle.net/Wexcode/BEhvQ/
