如何利用纯CSS制作二级或多级导航菜单

来源:百度知道 编辑:UC知道 时间:2024/05/16 09:48:47
要求
1: 纯CSS制作
2:能实现二级或多级
3:写出制作原理(非常重要!)
4:禁止CTR+C-—>CTR+V而不做任何解释提不出自己观点者
5:如果满意再追加分数
6:以后再补充
纯CSS的确可以实现想要的结果,只不过,我不明白其原理

<style>
<!--
* {margin:0px;padding:0px;}
body {overflow:scroll;font-size:12px;font-family:Arial, Helvetica, sans-serif;color:#000;}
a {font-size:12px;font-family:Arial, Helvetica, sans-serif;color:#000;text-decoration:none;}

.menu {position:relative;width:1000px;background-color:#360;}
.menu ul {list-style-type:none;}
.menu li {float:left;position:relative;}
.menu ul ul {visibility:hidden;position:absolute;left:3px;top:22px;border:1px solid #000;}
.menu table {position:absolute; top:0; left:0;}
.menu ul li:hover ul,
.menu ul a:hover ul{visibility:visible;}
.menu a{display:block;background:#360;padding:2px 10px;color:#fff;text-decoration:none;border:1px solid #360;}
.menu a:hover{background:#690;color:#000;}
.menu ul ul,
.menu ul ul li {clear:both;text-align:left;}
.menu ul ul li a{display:block;width:100px;height:15px;}
.menu ul ul li a:hover{background:#690;}
-->
</st