求纯css 实现下拉导航栏详细讲解。谢谢~~
就下面这段代码，讲解下原理吧，看的有点迷糊。50分送上，够细致再加分。谢谢！！<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict/...
就下面这段代码，讲解下原理吧，看的有点迷糊。50分送上，够细致再加分。谢谢！！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="all" />
<title></title>
<style type="text/css">
*{margin:0;padding:0;}
.menu{font-size:12px;position:relative;z-index:100;}
.menu ul{list-style:none;}
.menu li {float:left;position:relative;}
.menu ul ul {visibility:hidden;position:absolute;left:3px;top:23px;}
.menu table {position:absolute; top:0; left:0;}
.menu ul li:hover ul,
.menu ul a:hover ul{visibility:visible;}
.menu a{display:block;border:1px solid #aaa;background:#cacaca;padding:2px 10px;margin:3px;color:#fff;text-decoration:none;}
.menu a:hover{background:#fafafa;color:#000;border:1px solid #000;}
.menu ul ul{}
.menu ul ul li {clear:both;text-align:left;font-size:12px;}
.menu ul ul li a{display:block;width:100px;height:15px;margin:0;border:0;border-bottom:1px solid #858585;}
.menu ul ul li a:hover{border:0;background:#fafafa;border-bottom:1px solid #fff;}
</style>
</head>
<body>
<div class="menu">
<ul>
<li><a href="#">首页
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">首页一</a></li>
<li><a href="#">首页二</a></li>
<li><a href="">首页三</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">栏目二
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">栏目三
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">栏目四</a></li>
</ul>
</div>
<div style="clear:both">
我就不跑我就不跑我就不跑我就不跑我就不跑我就不跑我就不跑我就不跑我就不跑<br />
我就不跑我就不跑我就不跑我就不跑我就不跑我就不跑我就不跑我就不跑我就不跑<br />
</div>
</body>
</html> 展开
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="all" />
<title></title>
<style type="text/css">
*{margin:0;padding:0;}
.menu{font-size:12px;position:relative;z-index:100;}
.menu ul{list-style:none;}
.menu li {float:left;position:relative;}
.menu ul ul {visibility:hidden;position:absolute;left:3px;top:23px;}
.menu table {position:absolute; top:0; left:0;}
.menu ul li:hover ul,
.menu ul a:hover ul{visibility:visible;}
.menu a{display:block;border:1px solid #aaa;background:#cacaca;padding:2px 10px;margin:3px;color:#fff;text-decoration:none;}
.menu a:hover{background:#fafafa;color:#000;border:1px solid #000;}
.menu ul ul{}
.menu ul ul li {clear:both;text-align:left;font-size:12px;}
.menu ul ul li a{display:block;width:100px;height:15px;margin:0;border:0;border-bottom:1px solid #858585;}
.menu ul ul li a:hover{border:0;background:#fafafa;border-bottom:1px solid #fff;}
</style>
</head>
<body>
<div class="menu">
<ul>
<li><a href="#">首页
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">首页一</a></li>
<li><a href="#">首页二</a></li>
<li><a href="">首页三</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">栏目二
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">栏目三
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">栏目四</a></li>
</ul>
</div>
<div style="clear:both">
我就不跑我就不跑我就不跑我就不跑我就不跑我就不跑我就不跑我就不跑我就不跑<br />
我就不跑我就不跑我就不跑我就不跑我就不跑我就不跑我就不跑我就不跑我就不跑<br />
</div>
</body>
</html> 展开
展开全部
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">/*声明是XHTML1.0标准*/
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />/*声明UTF-8编码*/
<meta name="robots" content="all" />
<title></title>
<style type="text/css">
*{margin:0;padding:0;} /*所有元素内外边距为0*/
.menu{font-size:12px;position:relative;z-index:100;} /*menu下的元素字体为12，设定相对定位点，他的子元素会以他的左上角为基准移动，设定层位置100,目的是保持在最前面*/
.menu ul{list-style:none;} /*清除UL默认属性，无序列表前面的点，*/
.menu li {float:left;position:relative;} /*一级分类元素左浮动，目的是让他们横排，并设置相对定位点，*/
.menu ul ul {visibility:hidden;position:absolute;left:3px;top:23px;} //y设定二级分类默认隐藏，绝对定位于上级元素，也就是menu ul下的li,横排的一级分类，距上23，左3*/
.menu table {position:absolute; top:0; left:0;} /*这个是IE6下的二级分类，因为IE6只识别a的伪类*/
.menu ul li:hover ul,
.menu ul a:hover ul{visibility:visible;} /*鼠标移上去，显示二级分类，上面一行是IE7以上，下面是IE6的*/
.menu a{display:block;border:1px solid #aaa;background:#cacaca;padding:2px 10px;margin:3px;color:#fff;text-decoration:none;} /*把menu下的链接a 转换为区块，边框1实线，灰色，背景也是灰色，内边距上下为2左右为10，外边距为3 ，颜色白色，*/
.menu a:hover{background:#fafafa;color:#000;border:1px solid #000;} /*鼠标移上去一级分类背影浅灰色，颜色黑色，主要指字体的，边框黑色*/
.menu ul ul{}
.menu ul ul li {clear:both;text-align:left;font-size:12px;} /*二级分类清除浮动，目的是让它们竖排，左对齐，字号12*/
.menu ul ul li a{display:block;width:100px;height:15px;margin:0;border:0;border-bottom:1px solid #858585;} /*转换二级分类的链接a为区块，设置大小，清除边距，设置下边框为灰色，*/
.menu ul ul li a:hover{border:0;background:#fafafa;border-bottom:1px solid #fff;}
</style> /*鼠标移上去后，清除边框，设置背景色为浅灰色，下边框为白色*/
</head>
<body>
<div class="menu">
<ul>
<li><a href="#">首页
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]--> /*里面加个TABLE是为了撑开链接边上空间，IE6以上可以直接设A的大小*/
<ul>
<li><a href="#">首页一</a></li>
<li><a href="#">首页二</a></li>
<li><a href="">首页三</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">栏目二
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">栏目三
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">栏目四</a></li>
</ul>
</div>
<div style="clear:both">/*清除浮动，目的是二级分类弹出不会挤跑下面的文字*/
我就不跑我就不跑我就不跑我就不跑我就不跑我就不跑我就不跑我就不跑我就不跑<br />
我就不跑我就不跑我就不跑我就不跑我就不跑我就不跑我就不跑我就不跑我就不跑<br />
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />/*声明UTF-8编码*/
<meta name="robots" content="all" />
<title></title>
<style type="text/css">
*{margin:0;padding:0;} /*所有元素内外边距为0*/
.menu{font-size:12px;position:relative;z-index:100;} /*menu下的元素字体为12，设定相对定位点，他的子元素会以他的左上角为基准移动，设定层位置100,目的是保持在最前面*/
.menu ul{list-style:none;} /*清除UL默认属性，无序列表前面的点，*/
.menu li {float:left;position:relative;} /*一级分类元素左浮动，目的是让他们横排，并设置相对定位点，*/
.menu ul ul {visibility:hidden;position:absolute;left:3px;top:23px;} //y设定二级分类默认隐藏，绝对定位于上级元素，也就是menu ul下的li,横排的一级分类，距上23，左3*/
.menu table {position:absolute; top:0; left:0;} /*这个是IE6下的二级分类，因为IE6只识别a的伪类*/
.menu ul li:hover ul,
.menu ul a:hover ul{visibility:visible;} /*鼠标移上去，显示二级分类，上面一行是IE7以上，下面是IE6的*/
.menu a{display:block;border:1px solid #aaa;background:#cacaca;padding:2px 10px;margin:3px;color:#fff;text-decoration:none;} /*把menu下的链接a 转换为区块，边框1实线，灰色，背景也是灰色，内边距上下为2左右为10，外边距为3 ，颜色白色，*/
.menu a:hover{background:#fafafa;color:#000;border:1px solid #000;} /*鼠标移上去一级分类背影浅灰色，颜色黑色，主要指字体的，边框黑色*/
.menu ul ul{}
.menu ul ul li {clear:both;text-align:left;font-size:12px;} /*二级分类清除浮动，目的是让它们竖排，左对齐，字号12*/
.menu ul ul li a{display:block;width:100px;height:15px;margin:0;border:0;border-bottom:1px solid #858585;} /*转换二级分类的链接a为区块，设置大小，清除边距，设置下边框为灰色，*/
.menu ul ul li a:hover{border:0;background:#fafafa;border-bottom:1px solid #fff;}
</style> /*鼠标移上去后，清除边框，设置背景色为浅灰色，下边框为白色*/
</head>
<body>
<div class="menu">
<ul>
<li><a href="#">首页
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]--> /*里面加个TABLE是为了撑开链接边上空间，IE6以上可以直接设A的大小*/
<ul>
<li><a href="#">首页一</a></li>
<li><a href="#">首页二</a></li>
<li><a href="">首页三</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">栏目二
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">栏目三
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">栏目四</a></li>
</ul>
</div>
<div style="clear:both">/*清除浮动，目的是二级分类弹出不会挤跑下面的文字*/
我就不跑我就不跑我就不跑我就不跑我就不跑我就不跑我就不跑我就不跑我就不跑<br />
我就不跑我就不跑我就不跑我就不跑我就不跑我就不跑我就不跑我就不跑我就不跑<br />
</div>
</body>
</html>
参考资料： 纯手工打的
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
