為什么這個下拉菜單沒有正確顯示？

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

您需要將subnav放在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>