一、代码部分：
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时，若分别对某一元素的父级和子级都设置了背景颜色，则设置了父级的背景色的优先级会更高。也就是，最终的颜色会取决于父级元素的背景色。所以在设置的时候要小心，不要重复对某一元素的父级和子级设置背景色。
1458
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
