一、代碼部分：
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時，若分別對某一元素的父級和子級都設置了背景顏色，則設置了父級的背景色的優先級會更高。也就是，最終的顏色會取決於父級元素的背景色。所以在設置的時候要小心，不要重復對某一元素的父級和子級設置背景色。