帝国程序制作导航下拉菜单的代码

001<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
002<head>
003<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
004<title>css菜单演示</title>
005<style type="text/css">
006<!--
007*{margin:0;padding:0;border:0;}
008body {
009font-family: arial, 宋体, serif;
010font-size:12px;
011}
012#nav {
013line-height: 24px; list-style-type: none; background:#666;
014}
015 
016#nav a {
017display: block; width: 80px; text-align:center;
018}
019 
020#nav a:link {
021color:#666; text-decoration:none;
022}
023#nav a:visited {
024color:#666;text-decoration:none;
025}
026#nav a:hover {
027color:#FFF;text-decoration:none;font-weight:bold;
028}
029 
030#nav li {
031float: left; width: 80px; background:#CCC;
032}
033#nav li a:hover{
034background:#999;
035}
036#nav li ul {
037line-height: 27px; list-style-type: none;text-align:left;
038left: -999em; width: 180px; position: absolute;
039}
040#nav li ul li{
041float: left; width: 180px;
042background: #F6F6F6;
043}
044 
045#nav li ul a{
046display: block; width: 156px;text-align:left;padding-left:24px;
047}
048 
049#nav li ul a:link {
050color:#666; text-decoration:none;
051}
052#nav li ul a:visited {
053color:#666;text-decoration:none;
054}
055#nav li ul a:hover {
056color:#F3F3F3;text-decoration:none;font-weight:normal;
057background:#C00;
058}
059 
060#nav li:hover ul {
061left: auto;
062}
063#nav li.sfhover ul {
064left: auto;
065}
066#content {
067clear: left;
068}
069 
070-->
071</style>
072 
073<script type=text/javascript><!--//--><![CDATA[//><!--
074function menuFix() {
075var sfEls = document.getElementById("nav").getElementsByTagName("li");
076for (var i=0; i<sfEls.length; i++) {
077sfEls[i].onmouseover=function() {
078this.className+=(this.className.length>0? " ": "") + "sfhover";
079}
080sfEls[i].onMouseDown=function() {
081this.className+=(this.className.length>0? " ": "") + "sfhover";
082}
083sfEls[i].onMouseUp=function() {
084this.className+=(this.className.length>0? " ": "") + "sfhover";
085}
086sfEls[i].onmouseout=function() {
087this.className=this.className.replace(new RegExp("( ?|^)sfhoverb"),
088 
089"");
090}
091}
092}
093window.onload=menuFix;
094 
095//--><!]]></script>
096 
097</head>
098<body>
099 
100<ul id="nav">
101<li><a href="#">产品介绍</a>
102<ul>
103<li><a href="#">产品一</a></li>
104<li><a href="#">产品一</a></li>
105<li><a href="#">产品一</a></li>
106<li><a href="#">产品一</a></li>
107<li><a href="#">产品一</a></li>
108<li><a href="#">产品一</a></li>
109</ul>
110</li>
111<li><a href="#">服务介绍</a>
112<ul>
113<li><a href="#">服务二</a></li>
114<li><a href="#">服务二</a></li>
115<li><a href="#">服务二</a></li>
116<li><a href="#">服务二服务二</a></li>
117<li><a href="#">服务二服务二服务二</a></li>
118<li><a href="#">服务二</a></li>
119</ul>
120</li>
121<li><a href="#">成功案例</a>
122<ul>
123<li><a href="#">案例三</a></li>
124<li><a href="#">案例</a></li>
125<li><a href="#">案例三案例三</a></li>
126<li><a href="#">案例三案例三案例三</a></li>
127</ul>
128</li>
129<li><a href="#">关于我们</a>
130<ul>
131<li><a href="#">我们四</a></li>
132<li><a href="#">我们四</a></li>
133<li><a href="#">我们四</a></li>
134<li><a href="#">我们四111</a></li>
135</ul>
136</li>
137 
138<li><a href="#">在线演示</a>
139<ul>
140<li><a href="#">演示</a></li>
141<li><a href="#">演示</a></li>
142<li><a href="#">演示</a></li>
143<li><a href="#">演示演示演示</a></li>
144<li><a href="#">演示演示演示</a></li>
145<li><a href="#">演示演示</a></li>
146<li><a href="#">演示演示演示</a></li>
147<li><a href="#">演示演示演示演示演示</a></li>
148</ul>
149</li>
150<li><a href="#">联系我们</a>
151<ul>
152<li><a href="#">联系联系联系联系联系</a></li>
153<li><a href="#">联系联系联系</a></li>
154<li><a href="#">联系</a></li>
155<li><a href="#">联系联系</a></li>
156<li><a href="#">联系联系</a></li>
157<li><a href="#">联系联系联系</a></li>
158<li><a href="#">联系联系联系</a></li>
159</ul>
160</li>
161 
162</ul>
163 
164</body>
165</html>

商业模板（特惠）

您现在的位置：麦站网 > 站长学院 > 建站教程 >

热门标签

帝国程序制作导航下拉菜单的代码

相关阅读

发表评论

评论列表（0条）

商业模板（特惠）

您现在的位置： 麦站网 > 站长学院 > 建站教程 >

热门标签

帝国程序制作导航下拉菜单的代码

相关阅读

发表评论

评论列表（0条）

您现在的位置：麦站网 > 站长学院 > 建站教程 >