我們在日常瀏覽網頁時，會經常看到有二級下拉菜單列表的應用。它在我們日常網頁，特別是在頭部導航運用較多，那我們如何通過HTML和CSS來實現它呢？

1.HTML部分

HTML整體部分較為簡單，看到這個結構，我們可以首先想到的是運用ul列表標簽和a標簽來整體實現。話不多說，代碼如下：

<header><ul><li><a href="#">英雄介紹</a><div class="box"> //使用一個div盒子來裝下拉的內容選項<a href="#">裂空</a><a href="#">源氏</a><a href="#">麥克雷</a><a href="#">艾什</a><a href="#">安娜</a></div></li><li><a href="#">技能介紹</a><div class="box"><a href="#">脈沖炸彈</a><a href="#">巨龍來襲</a><a href="#">午時已到</a><a href="#">激素</a><a href="#">毀天滅地</a></div></li><li><a href="#">故事背景</a><div class="box"><a href="#">智械危機</a><a href="#">人工智能</a><a href="#">占領</a><a href="#">人工智能</a><a href="#">占領</a></div></li><li><a href="#">地圖介紹</a><div class="box"><a href="#">巴黎</a><a href="#">66號公路</a><a href="#">釜山</a><a href="#">花村</a><a href="#">漓江塔</a></div></li></ul>

2. CSS樣式部分

css樣式部分，主要運用一些比較基礎的排班和樣式進行樣式的實現。如flex布局（或者浮動），簡單的背景設置，以及hover的基礎用法，動畫的基礎用法。

*{margin: 0;padding: 0;}body{background: url(./2.jpg) no-repeat;background-size:cover;}header{height: 50px;width: 100%;background: linear-gradient(200deg,#e3c5eb, #a9c1ed);}ul{height: 50px;display: flex;list-style: none;justify-content: center;line-height: 50px;}li{text-align: center;width: 150px; }.box{background: linear-gradient(200deg,#e3c5eb, #a9c1ed);opacity: 0.9;/* 第1步：設置初始值 */height:0;overflow:hidden; //因為初始值高度為0，我們需要將下拉列表中的文字全部隱藏/* 第3步：在要實現動畫的標簽上添加transition屬性 */transition:all 1.5s; //設置動畫 all所有發生變化的css屬性都添加過渡（這里是高度變化，可以只設置高度） 過渡時間為1s}a{text-decoration: none;color: #555;display: block; //將a標簽設置為塊標簽，a標簽就會獨占一行，有序排列成列表}a:hover{background-color: deeppink;}li:hover .box{//第2步 動畫，設置目標值height: 250px;}

3.總結

該下拉列表菜單為基礎版本，只是為了初學者們方便了解通過基礎的HTML和CSS如何簡單的去實現。網頁下拉菜單列表制作方法有很多，后續也可以運用js來實現，這里只是簡單演示。小伙伴們可以通過自己的理解去運用所學的知識來實現。

總結

以上是生活随笔為你收集整理的初级基础HTML CSS实现二级下拉菜单的全部內容，希望文章能夠幫你解決所遇到的問題。

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