HTML+CSS製作二級菜單欄

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

效果圖附上：

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

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);
}

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