前端小白進階筆記之多級菜單分享

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>

此時能夠獲得以下效果圖：

提示：二級菜單的製做須要注意的三個問題：

一、層級關係：年月日很好的詮釋了多級下拉菜單的關係，當點擊年份的時候能夠讓月份顯示，點擊月份的時候能夠讓日期顯示，也就是說咱們須要給要顯示對象父級設置hover。
二、子元素會繼承父元素的樣式：在寫css樣式是咱們會發現子元素會繼承父元素的樣式，若是想要改變樣式，能夠給要改變樣式的對象一個id或者class單獨設置其屬性
三、position：relative(相對定位)/absolute(絕對定位)的用法。