下拉菜单，二级横向走动代码

原创

zhaoyong08 2010-07-18 12:03:51 ©著作权

©著作权归作者所有：来自51CTO博客作者zhaoyong08的原创作品，请联系作者获取转载授权，否则将追究法律责任

这网上搜索一段代码，方便以后学习并对代码加以实验，对与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[//><!]]></script>

</style>