水平导航栏下拉和水平移动

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是一个类选择不是元素选择器。