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(絕對定位)的用法。

總結

以上是生活随笔為你收集整理的前端小白进阶笔记之多级菜单分享的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。