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

Bertha 。 2022-10-02 02:55 195阅读 0赞

这网上搜索一段代码，方便以后学习 并对代码加以实验，对与IE6不能实现下代码的功能，应加以特定的修改  
下拉菜单，二级横向走动代码：  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " [http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd][http_www.w3.org_TR_xhtml1_DTD_xhtml1-transitional.dtd]">  
<html xmlns=" [http://www.w3.org/1999/xhtml][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>

转载于:https://blog.51cto.com/zhaoyong08/351790

[http_www.w3.org_TR_xhtml1_DTD_xhtml1-transitional.dtd]: http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
[http_www.w3.org_1999_xhtml]: http://www.w3.org/1999/xhtml