水平導航欄下拉和水平移動

Question

所以我有一個頁面上的水平導航欄。我不是很好（閱讀：初學者）的代碼，所以我通過網絡上發現的技巧和竅門將它拼湊在一起。我想添加的是一個代碼，用於創建垂直子部分創建另一個垂直子部分，但在其旁邊時則位於其旁邊。下面是我有：

HTML：

<div id="wrap"> 
     <ul class="navbar"> 
     <li><a href="page2.html"> Class Schedules </a> 
      <ul> 
      <li><a href=""> 2015 </a> 
      <li><a href="page2.html?year=15&season=fall"> 2015 Fall </a></li> 
      <li><a href="page2.html?year=15&season=spring"> 2015 Spring </a></li> 

2014 ...等

CSS：

#wrap { 
    width: 100%; 
    height: 50px; 
    margin: 0em; 
    z-index: 99; 
    position: fixed; 
    top: 0px; 


    background-color: #4d4d4d; 
    } 

.navbar  { 
      height: 50px; 
      padding: 0; 
      margin: auto; 
      position: absolute; 
      border-right: 1.5px solid #e68a00; 
      border-left: 1.5px solid #e68a00; 
      } 

    .navbar li { 
       height: auto; 
       width: 200px; 
       float: left; 
       text-align: center; 
       list-style: none; 
       font: normal bold 12px/1.2em Arial, Verdana, Helvetica; 
       padding: 0; 
       margin: 0; 
       background-color: #4d4d4d; 

       } 

     .navbar a {       
        padding: 18px 0; 
        border-left: 1px solid #ffa11a; 
        border-right: 1px solid #e68a00; 
        text-decoration: none; 
        color: white; 
        display: block; 
        } 

      .navbar li:hover, a:hover {background-color: #999999;} 

      .navbar li ul { 
          display: none; 
          height: auto;         
          margin: 0; 
          padding: 0;        
          } 

      .navbar li:hover ul { 
           display: block;         
           } 

      .navbar li ul li { 
           background-color: #4d4d4d; 

           } 

      .navbar li ul li a { 

           border-left: 1px solid #e68a00; 
           border-right: 1px solid #e68a00; 
           border-top: 1px solid #ffa11a; 
           border-bottom: 1px solid #e68a00; 
           } 

      .navbar li ul li a:hover {background-color: #999999;} 
            } 

與我有什麼，鼠標懸停在 「課程表」，一包含「2015」，「2015年秋季」，「2015春季」的下拉菜單出現。我希望它做的事情我下降到只是「2015」，當你在2015年下滑時，它會上下跳動到「2015年秋季」和「2015年春季」。我搞砸了CSS，試圖讓「.navbar li ul li」等隱藏，直到懸停，但我無法讓它工作。我不確定我需要更改/添加以實現此目的。

Answer 1

訣竅是這樣的：

.navbar li:hover > ul {display: block;} 

因爲.navbar是一個類選擇不是元素選擇器。