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

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;}
                                    }

根据我所拥有的，当鼠标悬停在“类(class)表”上时，会出现一个包含“2015”、“2015 年秋季”、“2015 年 Spring ”的下拉列表。我想让它做什么，我下拉到“2015 年”，当您将鼠标放在 2015 年时，它会上下弹出“2015 年秋季”和“2015 年 Spring ”。我弄乱了 CSS 试图隐藏“.navbar li ul li”等直到悬停，但我无法让它工作。我不确定我需要更改/添加什么才能实现这一点。

Answer 1

技巧是这样的:

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

因为 .navbar 是类选择器而不是元素选择器。