前端小白进阶笔记之多级菜单分享

css技术分享之二级、三级下拉菜单的制作：

首先看一下网页中的三级下拉菜单：

接下来自己动手试一试吧！

制作多级下拉菜单 在css中我们需要用到：

hover选择器用于选择鼠标指针浮动在上面的元素
display：none：隐藏元素
display:black：显示被隐藏的元素

第一步：搭建框架并填充内容

<ul class="c-year">

    <li>2017年</li>
    <li class="eight">2018年
        <ul class="c-month" >
            <li class="january">一月
                <ul class="c-day">
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                    <li>6</li>
                    <li>7</li>
                    <li>8</li>
                    <li>9</li>
                    <li>10</li>
                    <li>11</li>
                    <li>12</li>
                    <li>13</li>
                    <li>14</li>
                    <li>15</li>
                    <li>16</li>
                    <li>17</li>
                    <li>18</li>
                    <li>19</li>
                    <li>20</li>
                    <li>21</li>
                    <li>22</li>
                    <li>23</li>
                    <li>24</li>
                    <li>25</li>
                    <li>26</li>
                    <li>27</li>
                    <li>28</li>
                    <li>29</li>
                    <li>30</li>
                </ul>
            </li>
            <li>二月</li>
            <li>三月</li>
            <li>四月</li>
            <li>五月</li>
            <li>六月</li>
        </ul>
    </li>
    <li>2019年</li>
    <li>2020年</li>
    <li>2021年</li>
    <li>2022年</li>
</ul>

第二步：编写css样式

注意：子元素会继承父元素的样式，如果想要改变样式，可以给要改变样式的对象一个id或者class单独设置其属性。注释部分为下拉菜单隐藏，显示的样式。

 <style>
    *{
        padding: 0;
        margin: 0;
    }
   .c-year{
        position: relative;
        width: 60px;
        height: 250px;
        list-style-type: none;
        background: rgba(0,0,0,.8);
        color: #ffffff;
   }
    .c-year li{
        width: 60px;
        height: 40px;
        line-height: 40px;
    }
    .c-month{
        position: absolute;
        top: 40px;
        left: 60px;
        width: 400px;
        color: #ffffff;
        background: rgba(0,0,0,.7);

        text-align: center;
        /*隐藏二级菜单*/
        display: none;
    }
    .c-month li{
        display: inline-block;
    }
    .c-day{
        position: absolute;
        top: 40px;
        left:0;
        background: rgba(0,0,0,.6);
        display: inline ;
        /*隐藏三级菜单*/
        display: none;
    }
    /*给所有li在hover时添加背景颜色*/
    .c-year li:hover{
        background: rgba(255,255,255,.2);
    }
    /*当鼠标hover到年份时让月份显示*/
 .c-year li:hover .c-month {
        display: block;
    }
    /*当鼠标hover到月份时让日期显示*/
    .c-month li:hover .c-day {
        display: block;
    }
   
 </style>

此时可以得到如下效果图：

提示：二级菜单的制作需要注意的三个问题：

1、层级关系：年月日很好的诠释了多级下拉菜单的关系，当点击年份的时候可以让月份显示，点击月份的时候可以让日期显示，也就是说我们需要给要显示对象父级设置hover。
2、子元素会继承父元素的样式：在写css样式是我们会发现子元素会继承父元素的样式，如果想要改变样式，可以给要改变样式的对象一个id或者class单独设置其属性
3、position：relative(相对定位)/absolute(绝对定位)的用法。