今天我們來練習一下二級菜單欄，說實話比較簡單，但是自己一個人寫的時候錯誤百出，邏輯混亂，于是乎網上找了幾個案例，借鑒了一下思路，才整明白，鄙人確實不才，哈哈！

效果圖附上：

首先：我已鏈接了外部樣式重置，所以無需自己親自寫：

reset.css網上有很多，我用的是下面這個，免費分享給大家，永久有效哦！

鏈接：https://pan.baidu.com/s/1doPA17vy--QtSzUB8q9b8w?
提取碼：qq4o?

HTML：代碼：

<!-- 外部樣式表reset.css --> <link rel="stylesheet" href="reset.css"> <!-- 外部樣式表二級菜單 --> <link rel="stylesheet" href="style.css">

注意：以下我寫的所有樣式，必須要用reset.css外部樣式表！！?

1. 首先，我們來創建一個容器，用來放置整個導航欄：

HTML代碼： <div class="topmenu"></div> CSS代碼： /* 設置整個容器寬高背景色 */ .topmenu {width: 100%;height: 50px;background: lightgreen; }

效果圖：只有一個綠色的條哈！

2. 接下來我們要在.topmenu 容器中添加內容：

HTML代碼： <div class="topmenu"><!-- nav 整個導航欄 --><ul class="nav"><!-- 一級菜單 --><li class="nav-container"><a href="https://blog.csdn.net/weixin_36732046">我的博客</a></li><!-- 一級菜單 w3school --><li class="nav-container"><a href="https://www.w3school.com.cn/">W3school</a></li><!-- 一級菜單 菜鳥教程 --><li class="nav-container"><a href="https://www.runoob.com/">菜鳥教程</a></li></ul> </div> CSS代碼：/* 一級菜單欄.nav-container設置 */ .topmenu .nav .nav-container {float: left; /* 一級菜單設置左浮動，使其水平排列 */background: lightgreen; /*給整個一級菜單設置背景色（二級菜單包括在一級菜單中）*/text-align: center; /* 對齊方式為居中 */width: 155px; /*設置寬度*/border-right:solid 2px #fff; /*使用右邊框分割*/ } 設置字體行高和顏色： a {line-height: 50px;color: #fff; }

3. 一級菜單欄寫完啦，接下來寫二級菜單欄，把二級菜單欄添加到一級的<li>下面：

附上完整的HTML代碼：

<div class="topmenu"><!-- nav 整個導航欄 --><ul class="nav"><!-- 一級菜單 --><li class="nav-container"><a href="https://blog.csdn.net/weixin_36732046">我的博客</a><!-- 二級菜單 --><ul class="nav-list"><li><a href="https://blog.csdn.net/weixin_36732046/category_9560702.html">工具安裝</a></li><li><a href="https://blog.csdn.net/weixin_36732046/category_8012920.html">問題解決</a></li><li><a href="https://blog.csdn.net/weixin_36732046/category_8527355.html">實戰案例</a></li><li><a href="https://blog.csdn.net/weixin_36732046/category_8078929.html">Js函數</a></li></ul></li><li class="nav-container"><!-- 一級菜單 w3school --><a href="https://www.w3school.com.cn/">W3school</a><!-- 二級菜單 --><ul class="nav-list"><li><a href="https://www.w3school.com.cn/html/index.asp">HTML</a></li><li><a href="https://www.w3school.com.cn/html5/index.asp">HTML5</a></li><li><a href="https://www.w3school.com.cn/html5/index.asp">CSS</a></li><li><a href="https://www.w3school.com.cn/css3/index.asp">CSS3</a></li></ul></li><li class="nav-container"><!-- 一級菜單 菜鳥教程 --><a href="https://www.runoob.com/">菜鳥教程</a><!-- 二級菜單 --><ul class="nav-list"><li><a href="https://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li><li><a href="https://www.runoob.com/foundation/foundation-tutorial.html">Foundation5 教程</a></li><li><a href="https://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li><li><a href="https://www.runoob.com/angularjs/angularjs-tutorial.html">CSS3 教程</a></li><li><a href="https://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li></ul></li></ul> <!-- nav 整個導航欄結束 --></div>

?

效果圖：

3. 我們完成的差不多了，現在只需要把二級菜單欄隱藏，然后讓它點擊對應的一級菜單欄的時候再出現就行了。

CSS代碼：/* 隱藏二級菜單 */ .topmenu .nav .nav-container .nav-list {display: none; } /*點擊一級菜單的時候顯示二級菜單*/ .topmenu .nav .nav-container:hover .nav-list {display: list-item; } /*點擊時變色*/ .topmenu li:hover{background: lightskyblue; }

4. 好啦！已經全部做完啦！?網頁背景是我自己添加的，為了美化視覺效果用！

CSS代碼：/* 網頁背景圖片 */ body {background:url(http://attach.bbs.miui.com/forum/201202/18/090658g5shfjyixlhwjyyi.jpg); }

效果圖參考頁面最頂部！！

總結

以上是生活随笔為你收集整理的HTML+CSS制作二级菜单栏的全部內容，希望文章能夠幫你解決所遇到的問題。

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