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

纯css制作三级下拉导航 高清录像下载：/share/link?shareid=159998uk=4046162079 为什么学习“纯css制作三级下拉导航“ 先在我们在网上所见到的下拉导航有三种 1 js 优点 动作好看 缺点 不利于优化 制作复杂 2 swf 优点 动作好看 缺点 不利于优化 制作复杂 3 css 优点 制作方便 利于优化 缺点 比较呆板 具体怎么选择 那需要看你的需求 和客户的要求 我们今天教大家第三种（纯css制作三级下拉导航）的制作 效果图 实战开始 首先我们写一写通配符样式 方便我们后续制作 style type=text/css * { margin:0; padding:0} body { font-size:12px;} ul { list-style-type:none} a { text-decoration:none;} /style 为了照顾对导航栏制作不是很熟悉 或者忘了的同学 我们从基础讲起 第一步制作一级导航 效果 代码 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： div class=nav ul lia href=#顶级栏目一/a/li lia href=#顶级栏目一/a/li lia href=#顶级栏目一/a/li lia href=#顶级栏目一/a/li lia href=#顶级栏目一/a/li lia href=#顶级栏目一/a/li lia href=#顶级栏目一/a/li lia href=#顶级栏目一/a/li lia href=#顶级栏目一/a/li /ul /div 第二步 制作二级导航 效果 代码 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:#006666} Heml： div class=nav ul lia href=#顶级栏目一/a ul lia href=#顶级栏目二/a/li lia href=#顶级栏目二/a/li lia href=#顶级栏目二/a/li lia href=#顶级栏目二/a/li lia href=#顶级栏目二/a/li /ul /li lia href=#顶级栏目一/a ul lia href=#顶级栏目二/a/li lia href=#顶级栏目二/a/li lia href=#顶级栏目二/a/li lia href=#顶级栏目二/a/li lia href=#顶级栏目二/a/li /ul /li lia href=#顶级栏目一/a ul lia href=#顶级栏目二/a/li lia href=#顶级栏目二/a/li lia href=#顶级栏目二/a/li lia href=#顶级栏目二/a/li lia href=#顶级栏目二/a/li /ul /li lia href=#顶级栏目一/a ul lia href=#顶级栏目二/a/li lia href=#顶级栏目二/a/li lia href=#顶级栏目二/a/li lia href=#顶级栏目二/a/li lia href=#顶级栏目二/a/li /ul /li lia href=#顶级栏目一/a ul lia hre