教程搜索：
一网情深
>>
精选代码
>>
菜单导航代码
>> 用JS结合CSS做的横向、纵向菜单的例子 > 正文
用JS结合CSS做的横向、纵向菜单的例子
[来源：来自网络]
[作者：不详]
[日期：2008-01-29]
[热度：
]
纵向下拉菜单
HTML代码
<html > <head> <FCK:meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>css菜单演示</title> <style type="text/css"> *{margin:0;padding:0;border:0;} body { font-family: arial, 宋体, serif; font-size:12px; } #nav { line-height: 24px; list-style-type: none; background:#666; } #nav a { display: block; width: 80px; text-align:center; } #nav a:link { color:#666; text-decoration:none; } #nav a:visited { color:#666;text-decoration:none; } #nav a:hover { color:#FFF;text-decoration:none;font-weight:bold; } #nav li { float: left; width: 80px; background:#CCC; } #nav li a:hover{ background:#999; } #nav li ul { line-height: 27px; list-style-type: none;text-align:left; left: -999em; width: 180px; position: absolute; } #nav li ul li{ float: left; width: 180px; background: #F6F6F6; } #nav li ul a{ display: block; width: 180px;width: 156px;text-align:left;padding-left:24px; } #nav li ul a:link { color:#666; text-decoration:none; } #nav li ul a:visited { color:#666;text-decoration:none; } #nav li ul a:hover { color:#F3F3F3;text-decoration:none;font-weight:normal; background:#C00; } #nav li:hover ul { left: auto; } #nav li.sfhover ul { left: auto; } #content { clear: left; } </style> <script type=text/javascript> function menuFix() { var sfEls = document.getElementById("nav").getElementsByTagName("li"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { 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].onmouseout=function() { this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), ""); } } } window.onload=menuFix; </script> </head> <body> <ul id="nav"> <li><a href="#" _fcksavedurl="#">产品介绍</a> <ul> <li><a href="#" _fcksavedurl="#">产品一</a> <ul> <li><a href="#" _fcksavedurl="#">产品2</a></li> <li><a href="#" _fcksavedurl="#">产品2</a></li> </ul> </li> <li><a href="#" _fcksavedurl="#">产品一</a></li> <li><a href="#" _fcksavedurl="#">产品一</a></li> <li><a href="#" _fcksavedurl="#">产品一</a></li> <li><a href="#" _fcksavedurl="#">产品一</a></li> <li><a href="#" _fcksavedurl="#">产品一</a></li> </ul> </li> <li><a href="#" _fcksavedurl="#">服务介绍</a> <ul> <li><a href="#" _fcksavedurl="#">服务二</a></li> <li><a href="#" _fcksavedurl="#">服务二</a></li> <li><a href="#" _fcksavedurl="#">服务二</a></li> <li><a href="#" _fcksavedurl="#">服务二服务二</a></li> <li><a href="#" _fcksavedurl="#">服务二服务二服务二</a></li> <li><a href="#" _fcksavedurl="#">服务二</a></li> </ul> </li> <li><a href="#" _fcksavedurl="#">成功案例</a> <ul> <li><a href="#" _fcksavedurl="#">案例三</a></li> <li><a href="#" _fcksavedurl="#">案例</a></li> <li><a href="#" _fcksavedurl="#">案例三案例三</a></li> <li><a href="#" _fcksavedurl="#">案例三案例三案例三</a></li> </ul> </li> <li><a href="#" _fcksavedurl="#">关于我们</a> <ul> <li><a href="#" _fcksavedurl="#">我们四</a></li> <li><a href="#" _fcksavedurl="#">我们四</a></li> <li><a href="#" _fcksavedurl="#">我们四</a></li> <li><a href="#" _fcksavedurl="#">我们四111</a></li> </ul> </li> <li><a href="#" _fcksavedurl="#">在线演示</a> <ul> <li><a href="#" _fcksavedurl="#">演示</a></li> <li><a href="#" _fcksavedurl="#">演示</a></li> <li><a href="#" _fcksavedurl="#">演示</a></li> <li><a href="#" _fcksavedurl="#">演示演示演示</a></li> <li><a href="#" _fcksavedurl="#">演示演示演示</a></li> <li><a href="#" _fcksavedurl="#">演示演示</a></li> <li><a href="#" _fcksavedurl="#">演示演示演示</a></li> <li><a href="#" _fcksavedurl="#">演示演示演示演示演示</a></li> </ul> </li> <li><a href="#" _fcksavedurl="#">联系我们</a> <ul> <li><a href="#" _fcksavedurl="#">联系联系联系联系联系</a></li> <li><a href="#" _fcksavedurl="#">联系联系联系</a></li> <li><a href="#" _fcksavedurl="#">联系</a></li> <li><a href="#" _fcksavedurl="#">联系联系</a></li> <li><a href="#" _fcksavedurl="#">联系联系</a></li> <li><a href="#" _fcksavedurl="#">联系联系联系</a></li> <li><a href="#" _fcksavedurl="#">联系联系联系</a></li> </ul> </li> </ul> </body> </html>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
横向弹出的
HTML代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="//www.w3.org/1999/xhtml"> <head> <FCK:meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>下拉菜单</title> <style type="text/css"> <!-- ul { margin: 0px; padding: 0px; list-style: none; width: 120px; border-bottom: 1px solid #777; } ul li { position: relative; } li ul { position: absolute; left: 119px; top: 0px; display: none; } ul li a { display: block; font-size: 12px; text-decoration: none; color: #333; background-color: #FFF; padding: 5px; border: 1px solid #777; border-bottom: 0px; } /* Fix IE. Hide from IE Mac \*/ * html ul li { float: left; height: 1%; } * html ul li a { height: 1%; } /* End */ li:hover ul, li.over ul { display: block; } --> </style> <script language="javascript" type="text/javascript"> <!-- startList = function() { if (document.all&&document.getElementById) { navRoot = document.getElementById("nav"); for (i=0; i<navRoot.childNodes.length; i++) { node = navRoot.childNodes[i]; if (node.nodeName=="LI") { node.onmouseover=function() { this.className += " over"; } node.onmouseout=function() { this.className=this.className.replace(" over", ""); } } } } } window.onload = startList; --> </script> </head> <body> <ul id="nav"> <li><a href="#" _fcksavedurl="#">首页</a></li> <li><a href="#" _fcksavedurl="#">关于我们</a> <ul> <li><a href="#" _fcksavedurl="#">公司简介</a></li> <li><a href="#" _fcksavedurl="#">组织机构</a></li> <li><a href="#" _fcksavedurl="#">企业历程</a></li> </ul> </li> <li><a href="#" _fcksavedurl="#">服务内容</a> <ul> <li><a href="#" _fcksavedurl="#">网站建设</a></li> <li><a href="#" _fcksavedurl="#">网站推广</a></li> <li><a href="#" _fcksavedurl="#">域名空间</a></li> <li><a href="#" _fcksavedurl="#">企业信箱</a></li> </ul> </li> <li><a href="#" _fcksavedurl="#">联系我们</a> <ul> <li><a href="#" _fcksavedurl="#">温州总部</a></li> <li><a href="#" _fcksavedurl="#">瑞安分部</a></li> <li><a href="#" _fcksavedurl="#">乐清分部</a></li> </ul> </li> </ul> </body> </html>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
横向弹出的
HTML代码
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="//www.w3.org/1999/xhtml" lang="zh-CN"> <head> <FCK:meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>css菜单演示</title> <style type="text/css"> <!-- *{margin:0;padding:0;border:0;} body { font-family: arial, 宋体, serif; font-size:12px; } #nav { line-height: 24px; list-style-type: none; background:#666; } #nav a { display: block; width: 80px; text-align:center; } #nav a:link { color:#666; text-decoration:none; } #nav a:visited { color:#666;text-decoration:none; } #nav a:hover { color:#FFF;text-decoration:none;font-weight:bold; } #nav li { float: left; width: 80px; background:#CCC; } #nav li a:hover{ background:#999; } #nav li ul { line-height: 27px; list-style-type: none;text-align:left; left: -999em; width: 180px; position: absolute; } #nav li ul li{ float: left; width: 180px; background: #F6F6F6; } #nav li ul a{ display: block; width: 180px;w\idth: 156px;text-align:left;padding-left:24px; } #nav li ul a:link { color:#666; text-decoration:none; } #nav li ul a:visited { color:#666;text-decoration:none; } #nav li ul a:hover { color:#F3F3F3;text-decoration:none;font-weight:normal; background:#C00; } #nav li:hover ul { left: auto; } #nav li.sfhover ul { left: auto; } #content { clear: left; } --> </style> <script type=text/javascript><!--//--><![CDATA[//><!-- function menuFix() { var sfEls = document.getElementById("nav").getElementsByTagName("li"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { 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].onmouseout=function() { this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), ""); } } } window.onload=menuFix; //--><!]]></script> </head> <body> <ul id="nav"> <li><a href="#" _fcksavedurl="#">产品介绍</a> <ul> <li><a href="#" _fcksavedurl="#">产品一</a></li> <li><a href="#" _fcksavedurl="#">产品一</a></li> <li><a href="#" _fcksavedurl="#">产品一</a></li> <li><a href="#" _fcksavedurl="#">产品一</a></li> <li><a href="#" _fcksavedurl="#">产品一</a></li> <li><a href="#" _fcksavedurl="#">产品一</a></li> </ul> </li> <li><a href="#" _fcksavedurl="#">服务介绍</a> <ul> <li><a href="#" _fcksavedurl="#">服务二</a></li> <li><a href="#" _fcksavedurl="#">服务二</a></li> <li><a href="#" _fcksavedurl="#">服务二</a></li> <li><a href="#" _fcksavedurl="#">服务二服务二</a></li> <li><a href="#" _fcksavedurl="#">服务二服务二服务二</a></li> <li><a href="#" _fcksavedurl="#">服务二</a></li> </ul> </li> <li><a href="#" _fcksavedurl="#">成功案例</a> <ul> <li><a href="#" _fcksavedurl="#">案例三</a></li> <li><a href="#" _fcksavedurl="#">案例</a></li> <li><a href="#" _fcksavedurl="#">案例三案例三</a></li> <li><a href="#" _fcksavedurl="#">案例三案例三案例三</a></li> </ul> </li> <li><a href="#" _fcksavedurl="#">关于我们</a> <ul> <li><a href="#" _fcksavedurl="#">我们四</a></li> <li><a href="#" _fcksavedurl="#">我们四</a></li> <li><a href="#" _fcksavedurl="#">我们四</a></li> <li><a href="#" _fcksavedurl="#">我们四111</a></li> </ul> </li> <li><a href="#" _fcksavedurl="#">在线演示</a> <ul> <li><a href="#" _fcksavedurl="#">演示</a></li> <li><a href="#" _fcksavedurl="#">演示</a></li> <li><a href="#" _fcksavedurl="#">演示</a></li> <li><a href="#" _fcksavedurl="#">演示演示演示</a></li> <li><a href="#" _fcksavedurl="#">演示演示演示</a></li> <li><a href="#" _fcksavedurl="#">演示演示</a></li> <li><a href="#" _fcksavedurl="#">演示演示演示</a></li> <li><a href="#" _fcksavedurl="#">演示演示演示演示演示</a></li> </ul> </li> <li><a href="#" _fcksavedurl="#">联系我们</a> <ul> <li><a href="#" _fcksavedurl="#">联系联系联系联系联系</a></li> <li><a href="#" _fcksavedurl="#">联系联系联系</a></li> <li><a href="#" _fcksavedurl="#">联系</a></li> <li><a href="#" _fcksavedurl="#">联系联系</a></li> <li><a href="#" _fcksavedurl="#">联系联系</a></li> <li><a href="#" _fcksavedurl="#">联系联系联系</a></li> <li><a href="#" _fcksavedurl="#">联系联系联系</a></li> </ul> </li> </ul> </body> </html>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
横向弹出的
HTML代码
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" _fcksavedurl="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>"> <html xmlns="<a href="http://www.w3.org/1999/xhtml" _fcksavedurl="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>" lang="zh-CN"> <head> <FCK:meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>css菜单演示</title> <style type="text/css"> <!-- *{margin:0;padding:0;border:0;} body { font-family: arial, 宋体, serif; font-size:12px; } #nav { line-height: 24px; list-style-type: none; background:#666; width:80px; } #nav a { display: block; width: 80px; text-align:center; } #nav a:link { color:#666; text-decoration:none; } #nav a:visited { color:#666;text-decoration:none; } #nav a:hover { color:#FFF;text-decoration:none;font-weight:bold; } #nav li { /*float: left*/; width: 80px; background:#CCC; } #nav li a:hover{ background:#999; } #nav li ul { line-height: 27px; list-style-type: none;text-align:left; left: -999em; width: 180px; position: absolute; } #nav li ul li{ float: left; width: 180px; background: #F6F6F6; } #nav li ul a{ display: block; width: 180px;w\idth: 156px;text-align:left;padding-left:24px; } #nav li ul a:link { color:#666; text-decoration:none; } #nav li ul a:visited { color:#666;text-decoration:none; } #nav li ul a:hover { color:#F3F3F3;text-decoration:none;font-weight:normal; background:#C00; } #nav li:hover ul { left: auto; } #nav li.sfhover ul { left: auto; } #nav li.sfhover a { float:left; } #content { clear: left; } --> </style> <script type=text/javascript><!--//--><![CDATA[//><!-- function menuFix() { var sfEls = document.getElementById("nav").getElementsByTagName("li"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { 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].onmouseout=function() { this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), ""); } } } window.onload=menuFix; //--><!]]></script> </head> <body> <ul id="nav"> <li><a href="#" _fcksavedurl="#">产品介绍</a> <ul> <li><a href="#" _fcksavedurl="#">产品一</a></li> <li><a href="#" _fcksavedurl="#">产品一</a></li> <li><a href="#" _fcksavedurl="#">产品一</a></li> <li><a href="#" _fcksavedurl="#">产品一</a></li> <li><a href="#" _fcksavedurl="#">产品一</a></li> <li><a href="#" _fcksavedurl="#">产品一</a></li> </ul> </li> <li><a href="#" _fcksavedurl="#">服务介绍</a> <ul> <li><a href="#" _fcksavedurl="#">服务二</a></li> <li><a href="#" _fcksavedurl="#">服务二</a></li> <li><a href="#" _fcksavedurl="#">服务二</a></li> <li><a href="#" _fcksavedurl="#">服务二服务二</a></li> <li><a href="#" _fcksavedurl="#">服务二服务二服务二</a></li> <li><a href="#" _fcksavedurl="#">服务二</a></li> </ul> </li> <li><a href="#" _fcksavedurl="#">成功案例</a> <ul> <li><a href="#" _fcksavedurl="#">案例三</a></li> <li><a href="#" _fcksavedurl="#">案例</a></li> <li><a href="#" _fcksavedurl="#">案例三案例三</a></li> <li><a href="#" _fcksavedurl="#">案例三案例三案例三</a></li> </ul> </li> <li><a href="#" _fcksavedurl="#">关于我们</a> <ul> <li><a href="#" _fcksavedurl="#">我们四</a></li> <li><a href="#" _fcksavedurl="#">我们四</a></li> <li><a href="#" _fcksavedurl="#">我们四</a></li> <li><a href="#" _fcksavedurl="#">我们四111</a></li> </ul> </li> <li><a href="#" _fcksavedurl="#">在线演示</a> <ul> <li><a href="#" _fcksavedurl="#">演示</a></li> <li><a href="#" _fcksavedurl="#">演示</a></li> <li><a href="#" _fcksavedurl="#">演示</a></li> <li><a href="#" _fcksavedurl="#">演示演示演示</a></li> <li><a href="#" _fcksavedurl="#">演示演示演示</a></li> <li><a href="#" _fcksavedurl="#">演示演示</a></li> <li><a href="#" _fcksavedurl="#">演示演示演示</a></li> <li><a href="#" _fcksavedurl="#">演示演示演示演示演示</a></li> </ul> </li> <li><a href="#" _fcksavedurl="#">联系我们</a> <ul> <li><a href="#" _fcksavedurl="#">联系联系联系联系联系</a></li> <li><a href="#" _fcksavedurl="#">联系联系联系</a></li> <li><a href="#" _fcksavedurl="#">联系</a></li> <li><a href="#" _fcksavedurl="#">联系联系</a></li> <li><a href="#" _fcksavedurl="#">联系联系</a></li> <li><a href="#" _fcksavedurl="#">联系联系联系</a></li> <li><a href="#" _fcksavedurl="#">联系联系联系</a></li> </ul> </li> </ul> </body> </html>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
横向弹出的
HTML代码
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" _fcksavedurl="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>"> <html xmlns="<a href="http://www.w3.org/1999/xhtml" _fcksavedurl="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>" lang="zh-CN"> <head> <FCK:meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>css菜单演示</title> <style type="text/css"> <!-- *{margin:0;padding:0;border:0;} body { font-family: arial, 宋体, serif; font-size:12px; } #nav { line-height: 24px; list-style-type: none; background:#666; width:80px; } #nav a { display: block; width: 80px; text-align:center; } #nav a:link { color:#666; text-decoration:none; } #nav a:visited { color:#666;text-decoration:none; } #nav a:hover { color:#FFF;text-decoration:none;font-weight:bold; } #nav li { /*float: left*/; width: 80px; background:#CCC; } #nav li a:hover{ background:#999; } #nav li ul { line-height: 27px; list-style-type: none;text-align:left; left: -999em; width: 80px; position: absolute; } #nav li ul li{ float: left; width: 80px; background: #F6F6F6; } #nav li ul a{ display: block; width: 80px;w\idth:56px;text-align:left;padding-left:24px; } #nav li ul a:link { color:#666; text-decoration:none; } #nav li ul a:visited { color:#666;text-decoration:none; } #nav li ul a:hover { color:#F3F3F3;text-decoration:none;font-weight:normal; background:#C00; } #nav li:hover ul { left: auto; } #nav li.sfhover ul { left: auto;position:static; } #content { clear: left; } --> </style> <script type=text/javascript><!--//--><![CDATA[//><!-- function menuFix() { var sfEls = document.getElementById("nav").getElementsByTagName("li"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { 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].onmouseout=function() { this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), ""); } } } window.onload=menuFix; //--><!]]></script> </head> <body> <ul id="nav"> <li><a href="#" _fcksavedurl="#">产品介绍</a> <ul> <li><a href="#" _fcksavedurl="#">产品一</a></li> <li><a href="#" _fcksavedurl="#">产品一</a></li> <li><a href="#" _fcksavedurl="#">产品一</a></li> <li><a href="#" _fcksavedurl="#">产品一</a></li> <li><a href="#" _fcksavedurl="#">产品一</a></li> <li><a href="#" _fcksavedurl="#">产品一</a></li> </ul> </li> <li><a href="#" _fcksavedurl="#">服务介绍</a> <ul> <li><a href="#" _fcksavedurl="#">服务二</a></li> <li><a href="#" _fcksavedurl="#">服务二</a></li> <li><a href="#" _fcksavedurl="#">服务二</a></li> <li><a href="#" _fcksavedurl="#">服务二服务二</a></li> <li><a href="#" _fcksavedurl="#">服务二服务二服务二</a></li> <li><a href="#" _fcksavedurl="#">服务二</a></li> </ul> </li> <li><a href="#" _fcksavedurl="#">成功案例</a> <ul> <li><a href="#" _fcksavedurl="#">案例三</a></li> <li><a href="#" _fcksavedurl="#">案例</a></li> <li><a href="#" _fcksavedurl="#">案例三案例三</a></li> <li><a href="#" _fcksavedurl="#">案例三案例三案例三</a></li> </ul> </li> <li><a href="#" _fcksavedurl="#">关于我们</a> <ul> <li><a href="#" _fcksavedurl="#">我们四</a></li> <li><a href="#" _fcksavedurl="#">我们四</a></li> <li><a href="#" _fcksavedurl="#">我们四</a></li> <li><a href="#" _fcksavedurl="#">我们四111</a></li> </ul> </li> <li><a href="#" _fcksavedurl="#">在线演示</a> <ul> <li><a href="#" _fcksavedurl="#">演示</a></li> <li><a href="#" _fcksavedurl="#">演示</a></li> <li><a href="#" _fcksavedurl="#">演示</a></li> <li><a href="#" _fcksavedurl="#">演示演示演示</a></li> <li><a href="#" _fcksavedurl="#">演示演示演示</a></li> <li><a href="#" _fcksavedurl="#">演示演示</a></li> <li><a href="#" _fcksavedurl="#">演示演示演示</a></li> <li><a href="#" _fcksavedurl="#">演示演示演示演示演示</a></li> </ul> </li> <li><a href="#" _fcksavedurl="#">联系我们</a> <ul> <li><a href="#" _fcksavedurl="#">联系联系联系联系联系</a></li> <li><a href="#" _fcksavedurl="#">联系联系联系</a></li> <li><a href="#" _fcksavedurl="#">联系</a></li> <li><a href="#" _fcksavedurl="#">联系联系</a></li> <li><a href="#" _fcksavedurl="#">联系联系</a></li> <li><a href="#" _fcksavedurl="#">联系联系联系</a></li> <li><a href="#" _fcksavedurl="#">联系联系联系</a></li> </ul> </li> </ul> </body> </html>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
横向弹出的
HTML代码
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" _fcksavedurl="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>"> <html xmlns="<a href="http://www.w3.org/1999/xhtml" _fcksavedurl="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>" lang="zh-CN"> <head> <FCK:meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>css菜单演示</title> <style type="text/css"> <!-- *{margin:0;padding:0;border:0;} body { font-family: arial, 宋体, serif; font-size:12px; } #nav { line-height: 24px; list-style-type: none; background:#666; width:80px; } #nav a { display: block; width: 80px; text-align:center; } #nav a:link { color:#666; text-decoration:none; } #nav a:visited { color:#666;text-decoration:none; } #nav a:hover { color:#FFF;text-decoration:none;font-weight:bold; } #nav li { /*float: left*/; width: 80px; background:#CCC; } #nav li a:hover{ background:#999; } #nav li ul { line-height: 27px; list-style-type: none;text-align:left; left: -999em; width: 80px; position: absolute; } #nav li ul li{ float: left; width: 80px; background: #F6F6F6; } #nav li ul a{ display: block; width: 80px;w\idth:56px;text-align:left;padding-left:24px; } #nav li ul a:link { color:#666; text-decoration:none; } #nav li ul a:visited { color:#666;text-decoration:none; } #nav li ul a:hover { color:#F3F3F3;text-decoration:none;font-weight:normal; background:#C00; } #nav li:hover ul { left: auto; } #nav li.sfhover ul { left: auto;position:static; } #content { clear: left; } --> </style> <script type=text/javascript><!--//--><![CDATA[//><!-- function menuFix() { var sfEls = document.getElementById("nav").getElementsByTagName("li"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { 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].onmouseout=function() { this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), ""); } } } window.onload=menuFix; //--><!]]></script> </head> <body> <ul id="nav"> <li><a href="#" _fcksavedurl="#">产品介绍</a> <ul> <li><a href="#" _fcksavedurl="#">产品一</a></li> <li><a href="#" _fcksavedurl="#">产品一</a></li> <li><a href="#" _fcksavedurl="#">产品一</a></li> <li><a href="#" _fcksavedurl="#">产品一</a></li> <li><a href="#" _fcksavedurl="#">产品一</a></li> <li><a href="#" _fcksavedurl="#">产品一</a></li> </ul> </li> <li><a href="#" _fcksavedurl="#">服务介绍</a> <ul> <li><a href="#" _fcksavedurl="#">服务二</a></li> <li><a href="#" _fcksavedurl="#">服务二</a></li> <li><a href="#" _fcksavedurl="#">服务二</a></li> <li><a href="#" _fcksavedurl="#">服务二服务二</a></li> <li><a href="#" _fcksavedurl="#">服务二服务二服务二</a></li> <li><a href="#" _fcksavedurl="#">服务二</a></li> </ul> </li> <li><a href="#" _fcksavedurl="#">成功案例</a> <ul> <li><a href="#" _fcksavedurl="#">案例三</a></li> <li><a href="#" _fcksavedurl="#">案例</a></li> <li><a href="#" _fcksavedurl="#">案例三案例三</a></li> <li><a href="#" _fcksavedurl="#">案例三案例三案例三</a></li> </ul> </li> <li><a href="#" _fcksavedurl="#">关于我们</a> <ul> <li><a href="#" _fcksavedurl="#">我们四</a></li> <li><a href="#" _fcksavedurl="#">我们四</a></li> <li><a href="#" _fcksavedurl="#">我们四</a></li> <li><a href="#" _fcksavedurl="#">我们四111</a></li> </ul> </li> <li><a href="#" _fcksavedurl="#">在线演示</a> <ul> <li><a href="#" _fcksavedurl="#">演示</a></li> <li><a href="#" _fcksavedurl="#">演示</a></li> <li><a href="#" _fcksavedurl="#">演示</a></li> <li><a href="#" _fcksavedurl="#">演示演示演示</a></li> <li><a href="#" _fcksavedurl="#">演示演示演示</a></li> <li><a href="#" _fcksavedurl="#">演示演示</a></li> <li><a href="#" _fcksavedurl="#">演示演示演示</a></li> <li><a href="#" _fcksavedurl="#">演示演示演示演示演示</a></li> </ul> </li> <li><a href="#" _fcksavedurl="#">联系我们</a> <ul> <li><a href="#" _fcksavedurl="#">联系联系联系联系联系</a></li> <li><a href="#" _fcksavedurl="#">联系联系联系</a></li> <li><a href="#" _fcksavedurl="#">联系</a></li> <li><a href="#" _fcksavedurl="#">联系联系</a></li> <li><a href="#" _fcksavedurl="#">联系联系</a></li> <li><a href="#" _fcksavedurl="#">联系联系联系</a></li> <li><a href="#" _fcksavedurl="#">联系联系联系</a></li> </ul> </li> </ul> </body> </html>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
横向弹出的
HTML代码
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" _fcksavedurl="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>"> <html xmlns="<a href="http://www.w3.org/1999/xhtml" _fcksavedurl="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>" lang="zh-CN"> <head> <FCK:meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>css菜单演示</title> <style type="text/css"> <!-- *{margin:0;padding:0;border:0;} body { font-family: arial, 宋体, serif; font-size:12px; } #nav { line-height: 24px; list-style-type: none; background:#666; } #nav a { display: block; width: 80px; text-align:center; } #nav a:link { color:#666; text-decoration:none; } #nav a:visited { color:#666;text-decoration:none; } #nav a:hover { color:#FFF;text-decoration:none;font-weight:bold; } #nav li { float: left; width: 80px; background:#CCC; } #nav li a:hover{ background:#999; } #nav li ul { line-height: 27px; list-style-type: none;text-align:left; left: -999em; width: 980px; position: absolute; float:left; } #nav li ul li{ float: left; width: 80px; background: #F6F6F6; } #nav li ul a{ display: block; width: 80px;text-align:center; } #nav li ul a:link { color:#666; text-decoration:none; } #nav li ul a:visited { color:#666;text-decoration:none; } #nav li ul a:hover { color:#F3F3F3;text-decoration:none;font-weight:normal; background:#C00; } #nav li:hover ul { left: 0; } #nav li.sfhover ul { left: 0; } #content { clear: left; } --> </style> <script type=text/javascript><!--//--><![CDATA[//><!-- function menuFix() { var sfEls = document.getElementById("nav").getElementsByTagName("li"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { 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].onmouseout=function() { this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), ""); } } } window.onload=menuFix; //--><!]]></script> </head> <body> <ul id="nav"> <li><a href="#" _fcksavedurl="#">产品介绍</a> <ul> <li><a href="#" _fcksavedurl="#">产品一</a></li> <li><a href="#" _fcksavedurl="#">产品一</a></li> <li><a href="#" _fcksavedurl="#">产品一</a></li> <li><a href="#" _fcksavedurl="#">产品一</a></li> <li><a href="#" _fcksavedurl="#">产品一</a></li> <li><a href="#" _fcksavedurl="#">产品一</a></li> </ul> </li> <li><a href="#" _fcksavedurl="#">服务介绍</a> <ul> <li><a href="#" _fcksavedurl="#">服务二</a></li> <li><a href="#" _fcksavedurl="#">服务二</a></li> <li><a href="#" _fcksavedurl="#">服务二</a></li> <li><a href="#" _fcksavedurl="#">服务二服</a></li> <li><a href="#" _fcksavedurl="#">服务二服</a></li> <li><a href="#" _fcksavedurl="#">服务二</a></li> </ul> </li> <li><a href="#" _fcksavedurl="#">成功案例</a> <ul> <li><a href="#" _fcksavedurl="#">案例三</a></li> <li><a href="#" _fcksavedurl="#">案例</a></li> <li><a href="#" _fcksavedurl="#">案例三案</a></li> <li><a href="#" _fcksavedurl="#">案例三案</a></li> </ul> </li> <li><a href="#" _fcksavedurl="#">关于我们</a> <ul> <li><a href="#" _fcksavedurl="#">我们四</a></li> <li><a href="#" _fcksavedurl="#">我们四</a></li> <li><a href="#" _fcksavedurl="#">我们四</a></li> <li><a href="#" _fcksavedurl="#">我们四111</a></li> </ul> </li> <li><a href="#" _fcksavedurl="#">在线演示</a> <ul> <li><a href="#" _fcksavedurl="#">演示</a></li> <li><a href="#" _fcksavedurl="#">演示</a></li> <li><a href="#" _fcksavedurl="#">演示</a></li> <li><a href="#" _fcksavedurl="#">演示演示</a></li> <li><a href="#" _fcksavedurl="#">演示演示</a></li> <li><a href="#" _fcksavedurl="#">演示演示</a></li> <li><a href="#" _fcksavedurl="#">演示演示</a></li> <li><a href="#" _fcksavedurl="#">演示演示</a></li> </ul> </li> <li><a href="#" _fcksavedurl="#">联系我们</a> <ul> <li><a href="#" _fcksavedurl="#">联系联系</a></li> <li><a href="#" _fcksavedurl="#">联系联系</a></li> <li><a href="#" _fcksavedurl="#">联系</a></li> <li><a href="#" _fcksavedurl="#">联系联系</a></li> <li><a href="#" _fcksavedurl="#">联系联系</a></li> <li><a href="#" _fcksavedurl="#">联系联系</a></li> <li><a href="#" _fcksavedurl="#">联系联系</a></li> </ul> </li> </ul> </body> </html>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
横向弹出的
HTML代码
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" _fcksavedurl="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>"> <html xmlns="<a href="http://www.w3.org/1999/xhtml" _fcksavedurl="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>" lang="zh-CN"> <head> <FCK:meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>css菜单演示</title> <style type="text/css"> <!-- *{margin:0;padding:0;border:0;} body { font-family: arial, 宋体, serif; font-size:12px; } #nav { line-height: 24px; list-style-type: none; background:#666; } #nav a { display: block; width: 80px; text-align:center; } #nav a:link { color:#666; text-decoration:none; } #nav a:visited { color:#666;text-decoration:none; } #nav a:hover { color:#FFF;text-decoration:none;font-weight:bold; } #nav li { float: left; width: 80px; background:#CCC; } #nav li a:hover{ background:#999; } #nav li ul { line-height: 27px; list-style-type: none;text-align:left; left: -999em; width: 980px; position: absolute; float:left; } #nav li ul li{ float: left; width: 80px; background: #F6F6F6; } #nav li ul a{ display: block; width: 80px;text-align:center; } #nav li ul a:link { color:#666; text-decoration:none; } #nav li ul a:visited { color:#666;text-decoration:none; } #nav li ul a:hover { color:#F3F3F3;text-decoration:none;font-weight:normal; background:#C00; } #nav li:hover ul { left:auto; } #nav li.sfhover ul { left:auto; } #content { clear: left; } --> </style> <script type=text/javascript><!--//--><![CDATA[//><!-- function menuFix() { var sfEls = document.getElementById("nav").getElementsByTagName("li"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { 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].onmouseout=function() { this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), ""); } } } window.onload=menuFix; //--><!]]></script> </head> <body> <ul id="nav"> <li><a href="#" _fcksavedurl="#">产品介绍</a> <ul> <li><a href="#" _fcksavedurl="#">产品一</a></li> <li><a href="#" _fcksavedurl="#">产品一</a></li> <li><a href="#" _fcksavedurl="#">产品一</a></li> <li><a href="#" _fcksavedurl="#">产品一</a></li> <li><a href="#" _fcksavedurl="#">产品一</a></li> <li><a href="#" _fcksavedurl="#">产品一</a></li> </ul> </li> <li><a href="#" _fcksavedurl="#">服务介绍</a> <ul> <li><a href="#" _fcksavedurl="#">服务二</a></li> <li><a href="#" _fcksavedurl="#">服务二</a></li> <li><a href="#" _fcksavedurl="#">服务二</a></li> <li><a href="#" _fcksavedurl="#">服务二服</a></li> <li><a href="#" _fcksavedurl="#">服务二服</a></li> <li><a href="#" _fcksavedurl="#">服务二</a></li> </ul> </li> <li><a href="#" _fcksavedurl="#">成功案例</a> <ul> <li><a href="#" _fcksavedurl="#">案例三</a></li> <li><a href="#" _fcksavedurl="#">案例</a></li> <li><a href="#" _fcksavedurl="#">案例三案</a></li> <li><a href="#" _fcksavedurl="#">案例三案</a></li> </ul> </li> <li><a href="#" _fcksavedurl="#">关于我们</a> <ul> <li><a href="#" _fcksavedurl="#">我们四</a></li> <li><a href="#" _fcksavedurl="#">我们四</a></li> <li><a href="#" _fcksavedurl="#">我们四</a></li> <li><a href="#" _fcksavedurl="#">我们四111</a></li> </ul> </li> <li><a href="#" _fcksavedurl="#">在线演示</a> <ul> <li><a href="#" _fcksavedurl="#">演示</a></li> <li><a href="#" _fcksavedurl="#">演示</a></li> <li><a href="#" _fcksavedurl="#">演示</a></li> <li><a href="#" _fcksavedurl="#">演示演示</a></li> <li><a href="#" _fcksavedurl="#">演示演示</a></li> <li><a href="#" _fcksavedurl="#">演示演示</a></li> <li><a href="#" _fcksavedurl="#">演示演示</a></li> <li><a href="#" _fcksavedurl="#">演示演示</a></li> </ul> </li> <li><a href="#" _fcksavedurl="#">联系我们</a> <ul> <li><a href="#" _fcksavedurl="#">联系联系</a></li> <li><a href="#" _fcksavedurl="#">联系联系</a></li> <li><a href="#" _fcksavedurl="#">联系</a></li> <li><a href="#" _fcksavedurl="#">联系联系</a></li> <li><a href="#" _fcksavedurl="#">联系联系</a></li> <li><a href="#" _fcksavedurl="#">联系联系</a></li> <li><a href="#" _fcksavedurl="#">联系联系</a></li> </ul> </li> </ul> </body> </html>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
补充：
纵向
HTML代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="//www.w3.org/1999/xhtml"> <head> <title></title> <FCK:meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <script type="text/javascript"><!--//--><![CDATA[//><!-- startList = function() { if (document.all&&document.getElementById) { navRoot = document.getElementById("crumb"); for (i=0; i<navRoot.childNodes.length; i++) { node = navRoot.childNodes[i]; if (node.nodeName=="LI") { node.onmouseover=function() { this.className+=" over"; } node.onmouseout=function() { this.className=this.className.replace(" over", ""); } } } } } window.onload=startList; //--><!]]></script> <style type="text/css"> body{ text-align: center; font-size:12px; font-family:"宋体"; } #popimg{ WIDTH:770px; margin:0 auto; } #popimg2{ WIDTH:770px; margin:0 auto; text-align:center; z-index:-1; } #crumb ul { list-style-type: none; margin-top:15px; margin-bottom:25px; font-size:1.8em; font-weight:bold; } #crumb li { position:relative; float: left; } #crumb li ul li{ white-space: nowrap; } #crumb li ul { position:absolute; display: none; top: 20px; left:0; background:red; } #crumb li:hover ul, #crumb li.over ul { display: block; } #crumb ul li a{ display: block; background:url(../images/arrow_down_white.gif) right center no-repeat; padding-right:15px; margin-right:10px; } #crumb ul li a:hover{ background-color:#f4f4f4; } #test{ clear:both; background-color:#999999; width:769px; height:100px; margin:0 auto; } </style> </head> <body> <div id="popimg"> <ul id="crumb"> <li><a href="" _fcksavedurl="">文章</a> <ul> <li ><a href="" _fcksavedurl="">CSS教程</a> </li> <li ><a href="" _fcksavedurl="">DOM教程</a></li> <li ><a href="" _fcksavedurl="">XML教程</a></li> <li ><a href="" _fcksavedurl="">Flash教程</a></li> </ul> </li> <li><a href="" _fcksavedurl="">参考</a> <ul> <li><a href="" _fcksavedurl="">XHTML</a></li> <li><a href="" _fcksavedurl="">XML</a></li> <li><a href="" _fcksavedurl="">CSS</a></li> </ul> </li> <li><a href="" _fcksavedurl="">博客</a> <ul> <li><a href="" _fcksavedurl="">全部</a></li> <li><a href="" _fcksavedurl="">网页技术</a></li> <li><a href="" _fcksavedurl="">UI技术</a></li> <li><a href="" _fcksavedurl="">FLASH技术</a></li> </ul> </li> <li><a href="" _fcksavedurl="">文章</a> <ul> <li ><a href="" _fcksavedurl="">CSS教程</a> </li> <li ><a href="" _fcksavedurl="">DOM教程</a></li> <li ><a href="" _fcksavedurl="">XML教程</a></li> <li ><a href="" _fcksavedurl="">Flash教程</a></li> </ul> </li> <li><a href="" _fcksavedurl="">参考</a> <ul> <li><a href="" _fcksavedurl="">XHTML</a></li> <li><a href="" _fcksavedurl="">XML</a></li> <li><a href="" _fcksavedurl="">CSS</a></li> </ul> </li> <li><a href="" _fcksavedurl="">博客</a> <ul> <li><a href="" _fcksavedurl="">全部</a></li> <li><a href="" _fcksavedurl="">网页技术</a></li> <li><a href="" _fcksavedurl="">UI技术</a></li> <li><a href="" _fcksavedurl="">FLASH技术</a></li> </ul> </li> <li><a href="" _fcksavedurl="">博客</a> <ul> <li><a href="" _fcksavedurl="">全部</a></li> <li><a href="" _fcksavedurl="">网页技术</a></li> <li><a href="" _fcksavedurl="">UI技术</a></li> <li><a href="" _fcksavedurl="">FLASH技术</a></li> </ul> </li> </ul> </div> <div id="popimg2"> <div id="test"></div> </div> </body> </html>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
横向
HTML代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="//www.w3.org/1999/xhtml" lang="gb2312" xml:lang="gb2312"> <head> <title>站酷CSS代码演示</title> <FCK:meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> <!-- body{ background-color:white; font-size:12px; font-family:Arial, Helvetica, sans-serif; margin:0px; padding:0px; color:white; } ul,li{ margin:0px; padding:0px; } li{ display:inline; list-style:none; list-style-position:outside; text-align:center; font-weight:bold; float:left; } a:link{ color:#336601; text-decoration:none; float:left; width:100px; padding:3px 5px 0px 5px; } a:visited{ color:#336601; text-decoration:none; float:left; padding:3px 5px 0px 5px; width:100px; } a:hover{ color:white; float:left; padding:3px 3px 0px 20px; width:88px; text-decoration:none; background-color:#539D26; } a:active{ color:white; float:left; padding:3px 3px 0px 20px; width:88px; text-decoration:none; background-color:#539D26; } #nav{ width:600px; height:30px; border-bottom:0px; padding:0px 5px; position:absolute; z-index:1; left: 198px; top: 25px; } .list{ line-height:20px; text-align:left; padding:4px; font-weight:normal; } .menu1{ width:120px; height:auto; margin:6px 4px 0px 0px; border:1px solid #9CDD75; background-color:#F1FBEC; color:#336601; padding:6px 0px 0px 0px; cursor:hand; overflow-y:hidden; filter:Alpha(opacity=70); -moz-opacity:0.7; } .menu2{ width:120px; height:18px; margin:6px 4px 0px 0px; background-color:#F5F5F5; color:#999999; border:1px solid #EEE8DD; padding:6px 0px 0px 0px; overflow-y:hidden; cursor:hand; } --> </style> </head> <body> <div id="nav"> <ul> <li class="menu2" onMouseOver_fckprotectedatt="%20onMouseOver%3D%22this.className%3D'menu1'%22" onMouseOut_fckprotectedatt="%20onMouseOut%3D%22this.className%3D'menu2'%22">站酷首页 <div class="list"> <a href="#" _fcksavedurl="#">我的Png</a><br /> <a href="#" _fcksavedurl="#">我的Gif</a><br /> <a href="#" _fcksavedurl="#">我的酷站</a><br /> <a href="#" _fcksavedurl="#">我的日志</a><br /> <a href="#" _fcksavedurl="#">我的相册</a><br /> <a href="#" _fcksavedurl="#">我的收藏</a><br /> </div> </li> <li class="menu2" onMouseOver_fckprotectedatt="%20onMouseOver%3D%22this.className%3D'menu1'%22" onMouseOut_fckprotectedatt="%20onMouseOut%3D%22this.className%3D'menu2'%22">社区圈子 <div class="list"> <a href="#" _fcksavedurl="#">我的CHINAY</a><br /> <a href="#" _fcksavedurl="#">我的首页</a><br /> <a href="#" _fcksavedurl="#">我的日志</a><br /> <a href="#" _fcksavedurl="#">我的相册</a><br /> <a href="#" _fcksavedurl="#">我的收藏</a><br /> </div> </li> <li class="menu2" onMouseOver_fckprotectedatt="%20onMouseOver%3D%22this.className%3D'menu1'%22" onMouseOut_fckprotectedatt="%20onMouseOut%3D%22this.className%3D'menu2'%22">我的短信 <div class="list"> <a href="#" _fcksavedurl="#">我的CHINAY</a><br /> <a href="#" _fcksavedurl="#">我的相册</a><br /> <a href="#" _fcksavedurl="#">我的收藏</a><br /> </div> </li> <li class="menu2" onMouseOver_fckprotectedatt="%20onMouseOver%3D%22this.className%3D'menu1'%22" onMouseOut_fckprotectedatt="%20onMouseOut%3D%22this.className%3D'menu2'%22">账户管理 <div class="list"> <a href="#" _fcksavedurl="#">我的CHINAY</a><br /> <a href="#" _fcksavedurl="#">我的首页</a><br /> <a href="#" _fcksavedurl="#">我的日志</a><br /> <a href="#" _fcksavedurl="#">我的相册</a><br /> <a href="#" _fcksavedurl="#">我的收藏</a><br /> <a href="#" _fcksavedurl="#">我的日志</a><br /> <a href="#" _fcksavedurl="#">我的相册</a><br /> <a href="#" _fcksavedurl="#">我的收藏</a><br /> </div> </li> </ul> </div> </body> </html>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
Tags:
横向菜单
纵向菜单
相关文章
纵向菜单10（纵向完）
HTML代码 HTML代码 HTML代码 HTML代码 HTML代码 HTML代码 HTML代码 HTML代码 HTML代码 HTML代码