之前由于没有用到下拉菜单，一直没去实践（只在刚学建站时用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=”#”>CSS专栏</a>
<ul>
<li><a href=”#”>CSS基础</a></li>

?

<li><a href=”#”>CSS常用代码</a></li>
<li><a href=”#”>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 {
… …
}

B、父层LI的相对定位：
接着最关键就是定义：#nav ul li {position:relative;}把第一层的LI定义成相对定位后，下拉菜单的绝对定位就不会偏移，而以其上层的LI做为参照，此外，需要对下拉菜单的列表做2项工作：
第一项：设置下拉列表的UL不显示：#nav ul li ul 设为display:none 。以及绝对定位position:absolute; left:3px; top:24px; 。
第二项：对下拉列表的LI浮动进行清除#nav ul li ul li 设为 float:none ；如果不清除也可以，但下拉列表的UL要设置宽度width:99px;， 当不设置此宽度也不清除浮动继承时，下拉菜单就变成横向出向 ，如果你需要这种下拉效果，就不清除吧，如下图：

#nav ul li {position:relative;}
#nav ul li ul { display:none; margin:0;padding:0; position:absolute; left:3px; top:24px; background-color:#FC9;width:99px; border-bottom:1px solid #FC0;}
#nav ul li ul li {width:99px;float:none; border:0px 1px;}

C、光标移上去的状态定义：
定义完上面后，接着对下拉菜单在光标移到上层LI时的状态控制：

#