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

凭借我拥有的东西，当将课程安排在＆＃34;班级时间表＆＃34;时，下载包含＆＃34; 2015＆＃34;，＆＃34; 2015年秋季＆＃34;，＆＃34; 2015年春季＆＃34;出现。我想要它做什么我下降到＆＃34; 2015＆＃34;当你在2015年鼠标时，它会一直蹦到2015年秋季和＃34;和＆＃34;春天2015＆＃34;。我已经搞砸了试图拥有＆＃34; .navbar li ul li＆＃34;等等，直到悬停，但我不能让它工作。我不确定我需要更改/添加才能实现这一目标。

Answer 1

诀窍是：

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

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

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

1 个答案: