这网上搜索一段代码，方便以后学习  并对代码加以实验，对与IE6不能实现下代码的功能，应加以特定的修改
下拉菜单，二级横向走动代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>生成首页</title>
<link  rel="stylesheet" href="style/css.css" type="text/css"/>
<style type="text/css">
 #top_2_2{ margin:5px; padding:0px; z-index:1000 ; height:40px;}
  * { font-size:12px;
    font-family:Arial, Helvetica, sans-serif,"宋体"；}
 ul,li { list-style:none;}
#nav {
  height: 25px;
   list-style-type: none; 
line-height:25px;
overflow:hidden;
 color:#1791AE;
 font-weight:bold;
}
#nav a {
 display: block;
  width: 111px;
   text-align:center;
}
#nav a:link  {
 color:skyblue;
 text-decoration:none;
}
#nav a:visited  {
 color:skyblue;
 text-decoration:none;
}
#nav a:hover  {
 color:#FFF;
 text-decoration:none;
 font-weight:bold;
  background:#FF0000;
}
#nav li {
 float: left;
  width: 80px;
  padding-left:30px;
}
#nav li ul {
 line-height: 24px;
 list-style-type: none;
 text-align:left;
 left: -999px;
 width:650px; /*注意,这里一定要设置宽度,这是二级菜单的宽度，如果不设置，a:hover 时会消失*/;
 position: absolute;
 background:skyblue;
}
#nav li ul li{
  float: left;
  text-align:center;
  padding-left:30px;
  width: 100px; /*float就是子菜单横向的关键,可以继承父菜单而省略float*/
}
#nav li ul a{
 display: block;
 width: 65px;
 text-align:center;
 padding-left:30px;
}
#nav li ul a:link  {
 color:#F1F1F1;
  text-decoration:none;
 font-weight:bold;
 padding-left:30px;
}
#nav li ul a:visited  {
 color:#F1F1F1;
 text-decoration:none;
 padding-left:30px;
}
#nav li ul a:hover  {
 color:#FFF;
 text-decoration:none;
  font-weight:bold;
  text-align:center;
  padding-left:30px;
}
#nav li:hover ul {
 left:10%;/*设定二级菜单的位置*/
}
#nav li.sfhover ul {
 left:10%;
}
#content {
 clear: left;}
 <script type=text/javascript><!--//--><![CDATA[//><!--
function menuFix() {
 var sfEls = document.getElementById("nav").getElementsByTagName("li");
 for (var i=0; i<sfEls.length; i++) {
  sfEls[i]. {
  this.className+=(this.className.length>0? " ": "") + "sfhover";
  }
  sfEls[i].onMouseDown=function() {
  this.className+=(this.className.length>0? " ": "") + "sfhover";
  }
  sfEls[i].onMouseUp=function() {
  this.className+=(this.className.length>0? " ": "") + "sfhover";
  }
  sfEls[i]. {
  this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),
"");
  }
 }
}
window.onload=menuFix;
//--><!]]></script>
</style>
  <div id="top_2_2">
     <ul id="nav">
<li><a href="#">生成首页</a></li>
 <li><a href="/sort/list_1_1.shtml">关于生成</a>
 <ul>
 <li><a href="/sort/list_1_11_1.shtml">我们简介</a></li>
 <li><a href="/sort/list_1_12_1.shtml">品牌中心</a></li>
 <li><a href="/sort/list_1_13_1.shtml">企业文化</a></li>
 </ul>
</li>
 <li><a href="/sort/list_2_1.shtml">产品服务</a>
 <ul>
<li><a href="#">宠物</a></li>
<li><a href="#">个人护理</a></li>
<li><a href="#">家庭园林</a></li>
<li><a href="#">其他</a></li>
 </ul>
</li>
 <li><a href="/sort/list_5_1.shtml">新闻事件</a></li>
 <li><a href="/sort/list_7_1.shtml">人力资源</a></li>
 <li><a href="/sort/list_8_1.shtml">联系生成</a>
 <ul>
<li>&nbsp;</li>
<li>&nbsp;</li>
<li><a href="/sort/list_8_163_1.shtml">联系生成</a></li>
<li><a href="/sort/list_8_161_1.shtml">分公司</a></li>
 </ul>
</li>
</ul>
</div>