CSS+DIV下拉菜单（第1页）

　　之前由于没有用到下拉菜单，一直没去实践（只在刚学建站时用DW做了一个，无代码亲自操作经历），今天终于抽出时间做了一个下拉菜单，IE6、IE7、/FF下通用不变形，其实这个很基础，但对于往标准化转变有很好的促进作用。
先把关键点和思路摘录一下：
1、结构布局：
在菜单版块上，下拉的菜单也是放在UL中，但必需要嵌套在其父级的LI中，如下
<div id=”nav”>
<ul id=”nav_top”>
<li id=”nav_index”><a href=”/”>首页</a></li>
<li><a href=”http://www.52yfjc.com/”>CSS专栏</a>
<ul>
<li><a href=”http://www.52yfjc.com/”>CSS基础</a></li>
<li><a href=”http://www.52yfjc.com/”>CSS常用代码</a></li>
<li><a href=”http://www.52yfjc.com/”>CSS高级技术</a></li>
</ul>
</li>
… …
</div>
在这样的结构中，上层的DIV等标签不能用overflow:hidden; ，否则下拉菜单会出不来。我清晰的记得，刚学DW建站的第一个月，就用DW做了一个下拉菜单，但现在回去去看，那个更多依靠的是JS，有时定位不准会产生 下拉菜单跑位。而这样嵌套后，一会通过定位，就不会偏移。在实际应用时，nav可以加入LOGO等内容，而nav_top才是用于控制菜单。
2、样式继承：
由于在CSS中的组合选择符，会对其下的同样子标签会赋予同样的样式特征，因此，当我们对第一层的UL和LI定义时，下拉部分也会被带上同样的样式，先不 管这个，最后再去修正下拉部分的UL和LI。
A、第一层样式定义：
body {
margin: 0px;
padding: 0px;
font-size:12px;
}
#nav {
… …/* 略 */
width:800px;
margin:0 auto;
}
#nav ul {
… …
}
#nav ul li {
float: left;
}
#nav ul li a {
… …
}
#nav ul li a:hover {
… …
}