纯css制作三级下拉导航.doc

纯css制作三级下拉导航高清录像下载：/share/link?shareid=159998&uk=4046162079为什么学习“纯css制作三级下拉导航“先在我们在网上所见到的下拉导航有三种1 js优点 动作好看 缺点 不利于优化 制作复杂2 swf优点 动作好看 缺点 不利于优化 制作复杂3 css优点 制作方便 利于优化 缺点 比较呆板具体怎么选择 那需要看你的需求 和客户的要求 我们今天教大家第三种（纯css制作三级下拉导航）的制作效果图实战开始首先我们写一写通配符样式 方便我们后续制作* margin:0; padding:0body font-size:12px;ul list-style-type:nonea text-decoration:none;为了照顾对导航栏制作不是很熟悉 或者忘了的同学 我们从基础讲起第一步制作一级导航效果代码Css：/*以下是一级导航*/.nav width:900px; height:30px; background-color:#b4b4b4.nav ul li width:100px; height:30px; float:left; position:relative;.nav ul li a display:block;width:96px; border:2px solid #CC000C; height:26px; line-height:26px; text-align:center;.nav ul li a:hover background-color:#0033FF;Html：顶级栏目一顶级栏目一顶级栏目一顶级栏目一顶级栏目一顶级栏目一顶级栏目一顶级栏目一顶级栏目一第二步 制作二级导航效果代码Css：/*以下是二级导航*/.nav ul li ul display:none.nav ul li:hover ul display:block; width:100px; position:absolute; top:30px; left:0;background-color:#b4b4b4.nav ul li:hover ul li width:100px; height:30px; position:relative; .nav ul li:hover ul li a display:block; width:96px; height:26px; line-height:26px; border:2px solid #CC000C; text-align:center; .nav ul li:hover ul li a:hover background-color:#006666Heml：顶级栏目一顶级栏目二顶级栏目二顶级栏目二顶级栏目二顶级栏目二顶级栏目一顶级栏目二顶级栏目二顶级栏目二顶级栏目二顶级栏目二顶级栏目一顶级栏目二顶级栏目二顶级栏目二顶级栏目二顶级栏目二顶级栏目一顶级栏目二顶级栏目二顶级栏目二顶级栏目二顶级栏目二顶级栏目一顶级栏目二顶级栏目二顶级栏目二顶级栏目二顶级栏目二顶级栏目一顶级栏目二顶级栏目二顶级栏目二顶级栏目二顶级栏目二顶级栏目一顶级栏目二顶级栏目二顶级栏目二顶级栏目二顶级栏目二顶级栏目一顶级栏目二顶级栏目二顶级栏目二顶级栏目二顶级栏目二顶级栏目一顶级栏目二顶级栏目二顶级栏目二顶级栏目二顶级栏目二第三步骤 制作三级导航效果代码Css：/*以下是三级导航*/.nav ul li:hover ul li ul display:none.nav ul li:hover ul li:hover ul display:block; width:100px; position:absolute; top:0px; left:100px;background-color:#b4b4b4.nav ul li:hover ul li:hover ul li width:100px; height:30px; .nav ul li:hover ul li:hover ul li a display:block; width:96px; height:26px; line-height:26px; border:2px solid #CC000C; text-align:center; .nav ul li:hover ul li:hover ul li a:hover background-color:#00CC00.nav ul li:hover ul .nav_jw ul display:none.nav ul li:hover ul .nav_jw:hover ul display:block; width:100px; position:absolute; top:0px; left:-100px;background-color:#b4b4b4.nav ul li:hover ul .nav_jw:hover ul li width:100px; height:30px; .nav ul li:hover ul .nav_jw:hover ul li a display:block; width:96px; height:26px; line-height:26px; border:2px solid #CC000C; text-align:center; .nav ul li:hover ul .nav_jw:hover ul li a:hover background-color:#00CC00Heml：顶级栏目一顶级栏目二顶级栏目二顶级栏目二顶级栏目二顶级栏目三顶级栏目三顶级栏目二顶级栏目一顶级栏目二顶级栏目二顶级栏目二顶级栏目二顶级栏目二顶级栏目一顶级栏目二顶级栏目二顶级栏目二顶级栏目二顶级栏目二顶级栏目一顶级栏目二顶级栏目二顶级栏目二顶级栏目二顶级栏目二顶级栏目一顶级栏目二顶级栏目二顶级栏目二顶级栏目二顶级栏目二顶级栏目一顶级栏目二顶级栏目二顶级栏目二顶级栏目二顶级栏目二顶级栏目一顶级栏目二顶级栏目二顶级栏目二顶级栏目二顶级栏目二顶级栏目一顶级栏目二顶级栏目二顶级栏目二顶级栏目二顶级栏目二顶级栏目一顶级栏目二顶级栏目二顶级栏目二顶级栏目二顶级栏目三顶级栏目三顶级栏目二附录 整页面 （把下面的代码保存为.heml形式即可预览）无标题文档* margin:0; padding:0body font-size:12px;ul list-style-type:nonea text-decoration:none;/*以下是一级导航*/.nav width:900px; height:30px; background-color:#b4b4b4.nav ul li width:100px; height:30px; float:left; position:relative;.nav ul li a display:block;width:96px; border:2px solid #CC000C; height:26px; line-height:26px; text-align:center;.nav ul li a:hover background-color:#0033FF;/*以下是二级导航*/.nav ul li ul display:none.nav ul li:hover ul display:block; width:100px; position:absolute; top:30px; left:0;background-color:#b4b4b4.nav ul li:hover ul li width:100px; height:30px; position:relative; .nav ul li:hover ul li a display:block; width:96px; height:26px; line-height:26px; border:2px solid #CC000C; text-align:center; .nav ul li:hover ul li a:hover background-color:#006666/*以下是三级导航*/.nav ul li:hover ul li ul display:none.nav ul li:hover ul li:hover ul display:block; width:100px; position:absolute; top:0px; left:100px;background-color:#b4b4b4.nav ul li:hover ul li:hover ul li width:100px; height:30px; .nav ul li:hover ul li:hover ul li a display:block; width:96px; height:26px; line-height:26px; border:2px solid #CC000C; text-align:center; .nav ul li:hover ul li:hover ul li a:hover background-color:#00CC00.nav ul li:hover ul .nav_jw ul display:none.nav ul li:hover ul .nav_jw:hover ul display:block; width:100px; position:absolute; top:0px; left:-100px;background-color:#b4b4b4.nav ul li:hover ul .nav_jw:hover ul li width:100px; height:30px; .nav ul li:hover ul .nav_jw:hover ul li a display:block; width:96px; height:26px; line-height:26px; border:2px solid #CC000C; text-align:center; .nav ul li:hover ul .nav_jw:hover ul li a:hover background-color:#00CC00顶级栏目一顶级栏目二顶级栏目二顶级栏目二顶级栏目二顶级栏目三顶级栏目三顶级栏目二顶级栏目一顶级栏目二顶级栏目二顶级栏目