HTML+CSS 三級導航欄
一、程式碼部分：
1、CSS部分：
<style type="text/css">
*{margin:0px;padding: 0px;}
#daohang{background:#00BFFF;height: 40px;}
#shouye{background: #1E90FF;margin-left: 0px}
#daohang ul{height: 100%;}
li{list-style-type: none;}
.submenu-general{
width: 100px;height: 100%;
line-height: 40px; /*垂直居中*/
text-align:center;
/*display: inline-block; */
float: left;
/* 使用inline-block會造成空隙*/
}
span{display: inline-block;}
.submenu-detail>span{width: 100px;}
.nav11>span,.submenu11 span{width: 150px;}
.nav11{position: relative;}
.nav11>span{background:#1E90FF }
.submenu11{position: absolute;left: 150px;top: 0px; }
.submenu11 span{background:#ADD8E6}
.submenu11,.nav11>span{display: none;}
.submenu-detail:hover{background:#1E90FF }
.submenu-detail:hover .nav11>span{display: block;}
/*a:hover b前提是a是b的父級元素*/
.nav11>span:hover{background:#ADD8E6 }
.nav11:hover .submenu11{display: block;}
.submenu11 span:hover{background:#1E90FF }
.submenu1 span{text-align: left;text-indent: 20px;}
</style>
2、HTML部分：
<body>
<header><img src="./logo.jpg"></header>
<nav id="daohang">
<ul>
<li class="submenu-general" id="shouye">首頁</li>
<li class="submenu-general submenu-detail">
<span>需求</span>
<ul class="submenu1">
<li class="nav11">
<span>子選單1</span>
<ul class="submenu11">
<li><span>子選單1.1</span></li>
<li><span>子選單1.2</span></li>
<li><span>子選單1.3</span></li>
</ul>
</li>
<li class="nav11">
<span>子選單2</span>
<ul class="submenu11">
<li><span>子選單2.1</span></li>
<li><span>子選單2.2</span></li>
<li><span>子選單2.3</span></li>
</ul>
</li>
<li class="nav11">
<span>子選單3</span>
<ul class="submenu11">
<li><span>子選單3.1</span></li>
<li><span>子選單3.2</span></li>
<li><span>子選單3.3</span></li>
</ul>
</li>
</ul>
</li>
後面與前面程式碼重複，不再列舉。
二、專案重點：
1、掌握子元素選擇器、類選擇器的用法；
知識點1：子元素選擇器和後代選擇器的區別。
第一種表示方式：a b{}，第二種表示方式：a>b{}
第一種表示方式為後代選擇器的表示方式，通過a和b之間的空格，設定a元素的所有後代b的樣式，不管b是否是a的子元素，或者是a的孫子元素，所以後代選擇器又叫做包含選擇器，因為只要a包含了b的所有樣式都將發生改變；
第二種表示方式為子元素選擇器的表示方式，通過a和b之間的>，設定a元素的所有子元素b的樣式，條件是b必須是a的子元素。
2、掌握hover的用法；
知識點1：a：hover b｛｝的用法。
表示當滑鼠劃過a元素所在區域時，將改變b元素的樣式。這裡有個前提條件，就是b必須為a的後代元素（可以是子元素、孫元素等等）。
3、瞭解定位與浮動的區別
知識點1：display inline block和float left都可以實現將塊級元素並列橫向排列，其區別在於float不佔用文件流，而display inline block只是改變了塊元素的排列方式，還是佔用文件流，並且在顯示過程中會出現空隙，所以本專案使用的是後者：float：left。
三、專案難點：
1、如何保證上下級選單左對齊
2、如何通過滑鼠滑動該子選單所在塊元素改變其本身背景顏色及其子選單狀態
3、掌握無序列表的巢狀方法
四、思路：
第一步，通過nav塊元素搭出導航欄，通過設定inline-block或float設定一級選單橫向排列。各級選單都通過無序列表來搭建，每一層li標籤內再根據實際需要巢狀二級ul列表，再在二級選單的li中巢狀三級選單的ul，以此類推。
第二步，給二級選單和三級選單設定絕對定位，給其父元素ul設定相對定位，將二級選單和三級選單按照需求設定好定位，背景顏色，固定寬度等。
第三步，通過display none將二級選單和三級選單隱藏。
第四步，設定hover屬性對需要解鎖的選單進行display block，自動彈出選單選項，並改變本級選單的背景顏色。
第五步，將設定好的三級選單屬性複製給其他導航欄上的元素，通過類選擇器將設定好的樣式全部同步到所有導航欄中的元素中。
注意事項：在設定background時，若分別對某一元素的父級和子級都設定了背景顏色，則設定了父級的背景色的優先順序會更高。也就是，最終的顏色會取決於父級元素的背景色。所以在設定的時候要小心，不要重複對某一元素的父級和子級設定背景色。