为什么这个下拉菜单不能正常显示？

Question

所以，我正在尝试为我的第一个网站制作一个漂亮时尚的 CSS3 菜单，但我无法让它工作:( 我尝试了不同的显示、位置、清晰度: 两者，各种各样的东西，什么都没有完成。+ 我似乎无法使用它：

.subnav {
  display: none;
}
li:hover>subnav {
  display: block;
}

所以我让它一直显示并尝试正确定位它，然后我会添加 javascript 以在悬停时显示或尝试修复此问题，如果你能帮助解决这两个问题'一定很棒。哦，我没有删除样式，以防其中一些干扰我试图实现的目标。这是 html:

<nav>
 <ul>
   <li id="active">Menu1</li>
   <li>Menu2</li>
   <ul class="subnav">
     <li>Submenu</li>
     <li>Submenu</li>
     <li>Submenu</li>
   </ul>
   <li>Menu</li>
 </ul>
</nav>

和css：

nav {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: white;
  height: 35px;
  opacity: 0.9;
}
nav ul {
  float: right;
  margin: 0px 5px 0 0;
}
nav li {
  display: inline-block;
  height: 35px;
  font-family: 'Varela Round', sans-serif;
  font-size: 20px;
  list-style: none;
  line-height: 35px;
  vertical-align: middle;
  padding: 0px 10px;
  background: #3498db;
  color: white;
}
#active {
  background: #34495e;
  color: white;
  opacity: 1;
}
.subnav{
  position: relative;
  top: 35px;
  display: inline-block;
  clear: both;
  top: 40px;
  width: inherit;
}

Answer 1

您需要将子导航放在 li 内，然后 li:hover > .subnav 就可以了。

li:hover > .subnav 表示您正在搜索 li

下的 .subnav

.subnav {
  display: none;
}
li:hover> .subnav {
  display: block;
}

<nav>
 <ul>
   <li id="active">Menu1</li>
   <li>Menu2
    <ul class="subnav">
     <li>Submenu</li>
     <li>Submenu</li>
     <li>Submenu</li>
   </ul>
   </li>
  
   <li>Menu</li>
 </ul>
</nav>

为什么这个下拉菜单不能正常显示？

Why doesn't this dropdown menu display properly?

html

css

menu

nav