我正在尝试创建一个导航栏，其中包含第一个菜单的4个菜单和1个子菜单，但是，我无法创建子菜单。这是我的代码到目前为止，我不知道如何在我悬停甚至点击第一个菜单时显示子菜单。感谢。
<!DOCTYPE html>
<html>
<head>
<title> Website </title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<nav>
<ul>
<li><a class="#" href="#">Menu 1</a></li>
<ul>
<li>Submenu 1</li>
</ul>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
</ul>
</nav>
</body>
</html>
这是我的CSS
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #111111;
border: solid 1px black;
}
nav ul li {
float: left;
}
nav ul li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav ul li a:hover {
background-color: #ee8601;
}
.active {
background-color: #ee8601;
}
答案 0 :(得分：4)
ul不是ul的有效后代（应位于li内）li设置为position:relative;以包含内部Sub-UL的位置ul设置为position:absolute;和display:none; li:hover＆gt; display:block;它的孩子ul元素。示例1：
display: none/block
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
/*overflow: hidden;*/
background-color: #111;
/*border: solid 1px black;*/
}
nav ul li {
/*float: left;*/
display:inline-block; /*add istead of "float:left;" */
vertical-align:top; /*add*/
position:relative; /*add to contain sub ul*/
}
nav a {
display: block;
color: white;
text-align: center;
white-space:nowrap; /*add*/
padding: 14px 16px;
text-decoration: none;
}
nav li:hover > a, /* target the LI:hover, than change styles to A */
nav a.active{ /* merge together */
background-color: #ee8601;
}
/* HIDE sub ul */
nav li ul{
position:absolute;
display:none;
}
/* SHOW sub ul */
nav li:hover ul{
display:block;
}<nav>
<ul>
<li>
<a class="#" href="#">Menu 1</a>
<ul>
<li><a href="#">Submenu 1</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
</ul>
</nav>
以上是使用display none/block，现在让我们看看如何让它更加新鲜添加一些动画：
示例2：
visibility, opacity, transition and transform
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #111;
}
nav ul li {
display:inline-block;
vertical-align:top;
position:relative;
}
nav a {
display: block;
color: white;
text-align: center;
white-space:nowrap;
padding: 14px 16px;
text-decoration: none;
}
nav li:hover > a,
nav a.active{
background-color: #ee8601;
}
nav li ul{ /* HIDE sub ul */
position:absolute;
visibility:hidden;
opacity:0;
transition:0.2s;
transform: translateY(20%);
}
nav li:hover ul{ /* SHOW sub ul */
visibility: visible;
opacity:1;
transform: translateY(0%);
}<nav>
<ul>
<li>
<a class="#" href="#">Menu 1</a>
<ul>
<li><a href="#">Submenu 1</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
</ul>
</nav>
答案 1 :(得分：0)
您可以这样做：
隐藏子菜单，然后在其母li悬停时显示。
nav ul li ul {
display:none;
}
nav ul li:hover ul {
display:block;
}
但是您需要将子菜单放在li里面，如下所示：
<li><a class="#" href="#">Menu 1</a>
<ul>
<li>Submenu 1</li>
</ul>
</li>
以下是一个工作示例：http://codepen.io/caleboleary/pen/eJOdQb