经典css菜单，无限级朝右弹，代码短之极致了。

gu1dai 2005-07-05 02:04:16
本来在经典论坛下的朝右弹的二级菜单，代码极短。
我改了一天，改成了无限级的。

原来的二级菜单,三个文件，caidan.htm,style2.css,drop_down.js

caidan.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0058)http://www.alistapart.com/d/horizdropdowns/horizontal2.htm -->
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>Horizontal Drop Down Menus</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<SCRIPT src="drop_down.js" type=text/javascript></SCRIPT>

<STYLE type=text/css>@import url( style2.css );
</STYLE>

<META content="MSHTML 6.00.2600.0" name=GENERATOR></HEAD>
<BODY>
<UL id=nav>
<LI><A
href="http://www.alistapart.com/d/horizdropdowns/horizontal2.htm#">Home</A>
<LI><A
href="http://www.alistapart.com/d/horizdropdowns/horizontal2.htm#">About</A>
<UL>
<LI><A
href="http://www.alistapart.com/d/horizdropdowns/horizontal2.htm#">History</A>

<LI><A
href="http://www.alistapart.com/d/horizdropdowns/horizontal2.htm#">Team</A>
<LI><A
href="http://www.alistapart.com/d/horizdropdowns/horizontal2.htm#">Offices</A>
</LI></UL>
<LI><A
href="http://www.alistapart.com/d/horizdropdowns/horizontal2.htm#">Services</A>

<UL>
<LI><A
href="http://www.alistapart.com/d/horizdropdowns/horizontal2.htm#">Web
Design</A>

<UL>
<LI><A
href="http://www.alistapart.com/d/horizdropdowns/horizontal2.htm#">Web
Design->sub</A>
<LI><A
href="http://www.alistapart.com/d/horizdropdowns/horizontal2.htm#">Web
Design->sub2</A>
<LI><A
href="http://www.alistapart.com/d/horizdropdowns/horizontal2.htm#">Web
Design->sub3</A>

</UL>

<LI><A
href="http://www.alistapart.com/d/horizdropdowns/horizontal2.htm#">Internet
Marketing</A>
<LI><A
href="http://www.alistapart.com/d/horizdropdowns/horizontal2.htm#">Hosting</A>

<LI><A
href="http://www.alistapart.com/d/horizdropdowns/horizontal2.htm#">Domain
Names</A>
<LI><A
href="http://www.alistapart.com/d/horizdropdowns/horizontal2.htm#">Broadband</A>
</LI></UL>
<LI><A
href="http://www.alistapart.com/d/horizdropdowns/horizontal2.htm#">Contact
Us</A>
<UL>
<LI><A
href="http://www.alistapart.com/d/horizdropdowns/horizontal2.htm#">United
Kingdom</A>
<LI><A
href="http://www.alistapart.com/d/horizdropdowns/horizontal2.htm#">France</A>

<LI><A
href="http://www.alistapart.com/d/horizdropdowns/horizontal2.htm#">USA</A>
<LI><A
href="http://www.alistapart.com/d/horizdropdowns/horizontal2.htm#">Australia</A>
</LI></UL></LI></UL></BODY></HTML>

style2.css

body {
font: normal 11px verdana;
}

ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}

ul li {
position: relative;
}

li ul {
position: absolute;
left: 149px; /* Set 1px less than menu width */
top: 0;
display: none;
}

/* Styles for Menu Items */
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */

li ul li a { padding: 2px 5px; } /* Sub Menu Styles */

li:hover ul, li.over ul { display: block; } /* The magic */

drop_down.js

// JavaScript Document

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;
...全文
1508 72 打赏 收藏 转发到动态 举报
写回复
用AI写文章
72 条回复
切换为时间正序
请发表友善的回复…
发表回复
ntzcm 2006-04-10
  • 打赏
  • 举报
 回复
太好了
yshawxp 2006-02-07
  • 打赏
  • 举报
 回复
hao
gu1dai 2005-07-14
  • 打赏
  • 举报
 回复
zhiin
改的最后一楼69楼

横向菜单，非常的好，很漂亮，效率高。
zhiin1 2005-07-14
  • 打赏
  • 举报
 回复
感谢： gu1dai(异域苍穹......追夢人)
我也修改一个横向的!

<script type="text/javascript">
startList.tag = 0;
function startList(rootObj)
{
var navRoot, i=0;
if(rootObj == '' || rootObj == null) rootObj=document.all.navitree;

try
{
navRoot = rootObj;
if(navRoot==null)
{
alert('null a wrong accoured');
}
else
{
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="out";
}
if(startList.tag==1)
{
node.className = "out";
}
startList(node);
}
else if (node.nodeName=="UL")
{
startList.tag = 1;
startList(node);
}
} //for end
}
} //try end
catch(e)
{
alert(e);
} //catch end
} //startList

window.onload = startList;
</script>

<style type="text/css">
@import url( style.css );
body {
font-size: 11px;
font-family: 'Courier New';
}
.navitree a {
display: block;
width: 100%;
padding: 5px;
margin: 1px;
text-decoration: none;
background: #ffe;
color: #000;
}
.navitree a:hover {
background: #880;
color: #fff;
}
.navitree, .navitree ul {
margin: 0px;
padding: 0px;
border-bottom: #ccc 1px solid;
border-right: #ccc 1px solid;
list-style-type: none;
}

.navitree {
width: 451px;
}
.navitree li {
position: relative;
width: 150px;
padding: 0px;
border-left: #ccc 1px solid;
border-top: #ccc 1px solid;
float: left;
background: #fff;
}

.navitree li ul li {
position: relative;
width: 150px;
padding: 0px;
border: #ccc 1px solid;
border-bottom: 0px;
border-right: 0px;
float: left;
}
.navitree li ul {
display: none;
position: absolute;
left: -1px;
top: 26px;
}

.navitree li ul li ul {
position: absolute;
left: 149px; /* Set 1px less than menu width */
top: -1px;
}


li.over ul {
display: block;
visibility: visible;
}
li.out ul {
visibility: hidden;
/* 比用 display:none 效率会高 */
}
</style>
<BODY>
<ul id="navitree" class="navitree">
<li><a href="#">home</a></li>
<li>
<a href="#">about ></a>
<ul id="second">
<li><a href="#">history</a></li>
<li><a href="#">team</a></li>
<li><a href="#">offices</a></li>
</ul>
</li>
<li>
<a href="#">services ></a>
<ul>
<li>
<a href="#">web design ></a>
<ul>
<li><a href="#">web design - sub1</a></li>
<li><a href="#">web design - sub2</a></li>
<li>
<a href="#">web deisgn - sub3 ></a>
<ul>
<li><a href="#">sub3-1</a>
<li><a href="#">sub3-2</a>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</BODY>

gu1dai 2005-07-11
  • 打赏
  • 举报
 回复
结贴。
gu1dai 2005-07-09
  • 打赏
  • 举报
 回复
或许是机子差的原因吧
cai_yb 2005-07-09
  • 打赏
  • 举报
 回复
不错，mark一下
triffang 2005-07-09
  • 打赏
  • 举报
 回复
学习
Scarroot 2005-07-09
  • 打赏
  • 举报
 回复
mark
LouisJJW 2005-07-09
  • 打赏
  • 举报
 回复
这样啊, 我的CPU: CeleIII 1.7G, Memory: 512M 不算太差吧,
你们这里都不会出现这样的情况吗?

LouisJJW 2005-07-08
  • 打赏
  • 举报
 回复
TO: JK_10000(JK) ( ) 信誉：121 2005-7-8 9:33:48 得分: 0

您改的菜单好像显示很慢啊:)
我在子菜单上面山下移动鼠标时, 鼠标有短暂的时间会变成漏斗形状,导致页面会晃动.
不知道您这里是否有这种情况?


jybbh 2005-07-08
  • 打赏
  • 举报
 回复
我也顶一下
ljlyy 2005-07-08
  • 打赏
  • 举报
 回复
顶
gu1dai 2005-07-08
  • 打赏
  • 举报
 回复
zhiin()　ｏｕｋ.ｃｎ　() 要的横向菜单。来自经典论坛，绝无任何修改，代码绝对简短。

<!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" lang="zh-CN">
<head>
<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: 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="#">产品介绍</a>
<ul>
<li><a href="#">产品一</a></li>
<li><a href="#">产品一</a></li>
<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="#">服务介绍</a>
<ul>
<li><a href="#">服务二</a></li>
<li><a href="#">服务二</a></li>
<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="#">成功案例</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="#">关于我们</a>
<ul>
<li><a href="#">我们四</a></li>
<li><a href="#">我们四</a></li>
<li><a href="#">我们四</a></li>
<li><a href="#">我们四111</a></li>
</ul>
</li>

<li><a href="#">在线演示</a>
<ul>
<li><a href="#">演示</a></li>
<li><a href="#">演示</a></li>
<li><a href="#">演示</a></li>
<li><a href="#">演示演示演示</a></li>
<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="#">联系我们</a>
<ul>
<li><a href="#">联系联系联系联系联系</a></li>
<li><a href="#">联系联系联系</a></li>
<li><a href="#">联系</a></li>
<li><a href="#">联系联系</a></li>
<li><a href="#">联系联系</a></li>
<li><a href="#">联系联系联系</a></li>
<li><a href="#">联系联系联系</a></li>
</ul>
</li>

</ul>

</body>
</html>


gu1dai 2005-07-08
  • 打赏
  • 举报
 回复
修改版：补上了bug,并附上了说明，如果没有意外，这个是最终版。

<SCRIPT LANGUAGE="JavaScript">
<!--
// JavaScript Document
startList = function(rootObj) {
var navRoot,i=0; //var 声明则变量就为局部变量了，彼此不影响，递归就没问题了。
if(rootObj == '' || rootObj == null)rootObj=navitree;
try{
navRoot = rootObj;
if(navRoot==null){alert('TREE null a wrong accoured');}
else
{
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
if(node.childNodes.length>2){
//决定给LI套上哪个样式开始，子节点大于2个，说明有子菜单，子节点为A 、#text、UL
outclass="outbg";
node.onmouseover=function()
{
this.className = "overbg";
alert
//info.value = this.className;
}
node.onmouseout=function()
{
this.className= "outbg";
//info.value = this.className;
}
}
else{ //子节点数小于等于2个，说明无子菜单，子节点为：A 、#text.
outclass = "out"
node.onmouseover=function()
{
this.className = "over";
}
node.onmouseout=function()
{
this.className= outclass;
}
}//决定给LI套上哪个样式结束.如果有子菜单UL，则选择有箭头的样式，否则，选择无箭头的样式。
node.className = outclass;
}//判断节点是否为LI结束
//递归给li赋予鼠标动作
startList(node);
}//for end
}
}//try end
catch(e){
alert("error by catch throw");
}//catch end
}//</startList>
window.onload = startList;

//-->
</SCRIPT>
<style>
BODY { FONT: 11px verdana }
pre { FONT: 12px verdana }
/*这是定义id 为navitree的ul样式*/
UL#navitree{
PADDING : 0px; MARGIN: 0px; WIDTH: 150px;
BORDER-left:1px solid #008;BORDER-top:1px solid #008;BORDER-right:1px solid #008;
list-style:disc inside ;
}
/*这一句绝不能少,这是定义id 为navitree下的所有ul，包括ul的ul*/
UL#navitree UL{
BORDER-left:1px solid #008;BORDER-top:1px solid #008;BORDER-right:1px solid #008;
PADDING : 0px; MARGIN: 0px; WIDTH: 150px;

}
/*定义id 为 navitree 的 UL 下的所有LI*/
UL#navitree LI {
width:150px; padding:0px;MARGIN: 0px; POSITION: relative;
BORDER-bottom:1px solid #008;
}
/*初始化 id 为 navitree 的 UL 下的所有LI css样式为outbg时 */
UL#navitree LI.outbg UL{ DISPLAY:none; }

.navitree {font:11px verdana}
/*下面这一句异常关键,不可少*/
.navitree LI UL {
DISPLAY: none; LEFT: 150px; POSITION: absolute; TOP: 0px;
}
/*定义a link的样式*/
UL#navitree LI A { PADDING: 3px; DISPLAY: block; COLOR: #777; TEXT-DECORATION: none; }
UL#navitree LI A:hover { COLOR: white }

/*如果将下面这段去掉，LI的高度将会增加*/
HTML UL#navitree LI { FLOAT: left; HEIGHT: 1% }
HTML UL#navitree LI A { HEIGHT: 1% }

/*定义有子菜单的LI鼠标移过，移出的样式*/
LI.overbg {
background:url(D://usr//www//html//mambog/modules/navicategory/arr.gif) #000080 no-repeat top right;
color:white;
}
LI.outbg {background:url(D://usr//www//html//mambog/modules/navicategory/arr.gif) white no-repeat top right;
color:white;
}
LI.overbg UL{ DISPLAY: block;}
LI.outbg UL{DISPLAY:none;}

/*定义无子菜单的LI鼠标移过，移出的样式*/
LI.over {background:#000080;}
LI.out {background:white;}

</style>
<PRE>
我改了下，这个带图片箭头。图片箭头在css里定义，统一放到一个文件里了。
bug都补上了，样式也作了小小的修改。由于我对css的了解比较浅薄，只能尽力改到简洁了。
需要注意，如果你把三个文件分开来，那么，确保所有文件编码格式统一。如：都为gb2312，或都为utf-8

注意：由于原先的菜单样式定义不符合局部使用的要求，会影响整个页面的样式定义，所以我修改了。
修改后的样式符合局部使用的需要。其定义不会影响整个页面的样式定义。
整个UL容器需要像这样定义：
<UL id="<font color=red>navitree</font>" class="navitree">
此处的id号<font color=red>navitree</font>需要和javascript中的id号对应

在这里
if(rootObj == '' || rootObj == null)rootObj= <font color=red>navitree</font>;
</PRE>


<UL id="navitree" class="navitree">
<LI><a href=#>生活</a>
<UL><LI><a href=#>主要菜系</a>
<UL><LI><a href=#>论坛</a><LI><a href=#>菜系简介</a>
<UL><LI><a href=#>简介之间</a>
<UL><LI><a href=#>Latest</a>
<UL><LI><a href=#>好5级</a></UL></UL></UL></UL><LI><a href=#>hello</a><LI><a href=#>二手交易</a><LI><a href=#>生活小常识</a><LI><a href=#>通信/互联网</a><LI><a href=#>干洗</a><LI><a href=#>家政</a><LI><a href=#>美容/美发</a><LI><a href=#>运动</a><LI><a href=#>健康</a><LI><a href=#>餐饮</a>
<UL><LI><a href=#>中国饮食文化</a></UL></UL></LI>
<LI><a href=#>购物</a>
<UL><LI><a href=#>婚纱、服装定做</a><LI><a href=#>本地特产</a><LI><a href=#>花卉（插花、盆景）</a><LI><a href=#>CD、VCD、乐器</a><LI><a href=#>玩具、兴趣、游戏</a><LI><a href=#>妇幼儿童用品</a><LI><a href=#>室内装饰</a><LI><a href=#>日用品</a><LI><a href=#>电脑、家电</a><LI><a href=#>食品、饮料</a><LI><a href=#>服装、服饰、鞋</a><LI><a href=#>专卖店</a><LI><a href=#>综合商场</a></UL></LI><LI><a href=#>居住</a>
<UL><LI><a href=#>宾馆</a><LI><a href=#>租房、买房</a></UL></LI><LI><a href=#>出行</a>
<UL><LI><a href=#>旅行</a><LI><a href=#>车船飞机票</a><LI><a href=#>交通</a></UL></LI><LI><a href=#>娱乐</a>
<UL><LI><a href=#>其他（摄影、雕刻.....）</a><LI><a href=#>演出信息</a><LI><a href=#>休闲场所</a><LI><a href=#>酒吧</a><LI><a href=#>书籍</a><LI><a href=#>电影</a><LI><a href=#>音乐</a></UL></LI><LI><a href=#>服务</a>
<UL><LI><a href=#>快递</a><LI><a href=#>订票</a><LI><a href=#>办公用品</a><LI><a href=#>天气</a></UL></LI><LI><a href=#>招聘</a>
<UL><LI><a href=#>求职</a><LI><a href=#>企业招聘</a>
<UL><LI><a href=#>兼职</a></UL></UL></LI><LI><a href=#>新闻</a>
<UL><LI><a href=#>热点访谈</a><LI><a href=#>热点新闻</a><LI><a href=#>本地新闻</a></UL></LI><LI><a href=#>育儿</a>
<UL><LI><a href=#>兴趣班</a><LI><a href=#>公园</a><LI><a href=#>游乐园</a><LI><a href=#>儿童用品</a><LI><a href=#>学校</a><LI><a href=#>托儿所</a></UL></LI><LI><a href=#>学习/培训</a>
<UL><LI><a href=#>意大利学习</a>
<UL><LI><a href=#>top 学习培训</a></UL><LI><a href=#>日语培训</a><LI><a href=#>文化交流</a><LI><a href=#>家教</a><LI><a href=#>英文培训</a><LI><a href=#>中文讲座</a></UL></LI></UL>

fengfangfang 2005-07-08
  • 打赏
  • 举报
 回复
JK_10000(JK)你的菜单真牛，
我想要一个只有二级的，但二级的可以根据项目的多少，分成多列，比如
每列显示8个菜单，如果20个菜单就显示三列，可否做到
JK_10000 2005-07-08
  • 打赏
  • 举报
 回复
根据 emu_ston(祝福后山) 的意见，改了一下，再借楼主宝地一用


<HTML>

<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JK:支持民族工业,尽量少买X货</title>
<SCRIPT language=javascript >

function mouseOverFun(obj)
{
var toLi=event.toElement;
if(toLi==obj) return false;
if(toLi.tagName=="A" || toLi.tagName=="UL") toLi=toLi.parentElement;
if(toLi.children[1])
{
toLi.children[1].style.display="block";
toLi.insertAdjacentHTML("beforeEnd","<iframe class='backgroundIframe'></iframe>");
}
}

function onmouseOutFun(obj)
{
var fromLi=event.fromElement;
var eventToElement=event.toElement;
if(fromLi==obj) return false;
if(fromLi.tagName=="A" || fromLi.tagName=="UL") fromLi=fromLi.parentElement;
if(fromLi.contains(eventToElement)) return false;
if(fromLi.children[1])
{
fromLi.children[1].style.display="none";
fromLi.children[2].removeNode(true);
}
var maxLevel=10;
while( maxLevel-- > 0)
{
fromLi=fromLi.parentElement.parentElement;
if(fromLi.contains(obj) || (fromLi.tagName!="LI" && fromLi.tagName!="TD") || fromLi.contains(eventToElement))
break;
fromLi.children[1].style.display="none";
fromLi.children[2].removeNode(true);
}
}
</SCRIPT>

<STYLE type="text/css">

* {
FONT: 11px verdana
}
UL {
PADDING: 0px; MARGIN: 0px; WIDTH: 150px; BORDER: #ccc 1px solid; DISPLAY:none; POSITION: absolute; LEFT: 149px; TOP: 0px;Z-INDEX:10;
}
LI {
BACKGROUND-COLOR:#ffffff;PADDING: 0px; MARGIN: 0px; WIDTH: 150px; BORDER: #ccc 1px solid; POSITION: relative;
}
TD LI UL {

}
.menuA{
COLOR: #777; TEXT-DECORATION: none; WIDTH:100%; HEIGHT:20px;
}
.menuAWidthSubmenu{
background-image: url('SubmenuExists.jpg'); background-repeat: no-repeat; background-position: right 50%;
}
.menuA:hover {
BACKGROUND-COLOR: #d9d9f9; COLOR: #e2144a;
}

.menuLevel0{
PADDING: 0px; MARGIN: 0px;WIDTH: 100px; BORDER: #ccc 1px solid; POSITION: relative;
}
.menuLevel1{
LEFT: 0px; TOP: 20px;
}

.backgroundIframe{
position:absolute;
z-index:9;
width:expression(this.previousSibling.offsetWidth);
height:expression(this.previousSibling.offsetHeight);
left:expression(this.previousSibling.offsetLeft);
top:expression(this.previousSibling.offsetTop);

}
</STYLE>

<META content="Microsoft FrontPage 4.0" name=GENERATOR></HEAD>
<BODY>

部分代码来自gu1dai(异域苍穹......追夢人)：http://community.csdn.net/Expert/topic/4123/4123998.xml?temp=.4086878<br>
<table onmouseover="mouseOverFun(this);" onmouseout="onmouseOutFun(this);" border=0 cellspacing=0 >
<tr>
<td class="menuLevel0">
<A class="menuA menuAWidthSubmenu" href="#">Munu1</A>
<UL class="menuLevel1">
<LI>
<A class="menuA menuAWidthSubmenu" href="#">Services</A>
<UL>
<LI>
<A class="menuA menuAWidthSubmenu" href="#">Web Design</A>
<UL>
<LI><A class="menuA" href="#">Web Design->sub</A>
<LI><A class="menuA" href="#">Web Design->sub2</A>
<LI>
<A class="menuA menuAWidthSubmenu" href="#">Web Design->sub3</A>
<UL>
<LI><A class="menuA" href="#">Web Design->3</A>
<LI><A class="menuA" href="#">Web Design->3</A>
<LI><A class="menuA" href="#">Web Design->3</A>
</UL>
</UL>
<LI><A class="menuA" href="#">Internet Marketing</A>
<LI><A class="menuA" href="#">Hosting</A>
<LI><A class="menuA" href="#">Domain Names</A>
<LI><A class="menuA" href="#">Broadband</A>
</UL>
<LI>
<A class="menuA menuAWidthSubmenu" href="#">Services</A>
<UL>
<LI>
<A class="menuA menuAWidthSubmenu" href="#">Web Design</A>
<UL>
<LI><A class="menuA" href="#">Web Design->sub</A>
<LI><A class="menuA" href="#">Web Design->sub2</A>
<LI>
<A class="menuA menuAWidthSubmenu" href="#">Web Design->sub3</A>
<UL>
<LI><A class="menuA" href="#">Web Design->3</A>
<LI><A class="menuA" href="#">Web Design->3</A>
<LI><A class="menuA" href="#">Web Design->3</A>
</UL>
</UL>
<LI><A class="menuA" href="#">Internet Marketing</A>
<LI><A class="menuA" href="#">Hosting</A>
<LI><A class="menuA" href="#">Domain Names</A>
<LI><A class="menuA" href="#">Broadband</A>
</UL>

</UL>
</td>
<td class="menuLevel0">
<A class="menuA menuAWidthSubmenu" href="#">Munu2</A>
<UL class="menuLevel1">
<LI>
<A class="menuA menuAWidthSubmenu" href="#">Services</A>
<UL>
<LI>
<A class="menuA menuAWidthSubmenu" href="#">Web Design</A>
<UL>
<LI><A class="menuA" href="#">Web Design->sub</A>
<LI><A class="menuA" href="#">Web Design->sub2</A>
<LI>
<A class="menuA menuAWidthSubmenu" href="#">Web Design->sub3</A>
<UL>
<LI><A class="menuA" href="#">Web Design->3</A>
<LI><A class="menuA" href="#">Web Design->3</A>
<LI><A class="menuA" href="#">Web Design->3</A>
</UL>
</UL>
<LI><A class="menuA" href="#">Internet Marketing</A>
<LI><A class="menuA" href="#">Hosting</A>
<LI><A class="menuA" href="#">Domain Names</A>
<LI><A class="menuA" href="#">Broadband</A>
</UL>
<LI>
<A class="menuA menuAWidthSubmenu" href="#">Services</A>
<UL>
<LI>
<A class="menuA" href="#">Web Design</A>
<UL>
<LI><A class="menuA" href="#">Web Design->sub</A>
<LI><A class="menuA" href="#">Web Design->sub2</A>
<LI>
<A class="menuA menuAWidthSubmenu" href="#">Web Design->sub3</A>
<UL>
<LI><A class="menuA" href="#">Web Design->3</A>
<LI><A class="menuA" href="#">Web Design->3</A>
<LI><A class="menuA" href="#">Web Design->3</A>
</UL>
</UL>
<LI><A class="menuA" href="#">Internet Marketing</A>
<LI><A class="menuA" href="#">Hosting</A>
<LI><A class="menuA" href="#">Domain Names</A>
<LI><A class="menuA" href="#">Broadband</A>
</UL>

</UL>
</td>

</tr>
</table>
<select><option>content content content content content content content content content content content </select>
<select><option>content content content content content content content content content content content </select>
<select><option>content content content content content content content content content content content </select>
<select><option>content content content content content content content content content content content </select>
<select><option>content content content content content content content content content content content </select>
<select><option>content content content content content content content content content content content </select>
<select><option>content content content content content content content content content content content </select>

</BODY></HTML>

lodestar51 2005-07-08
  • 打赏
  • 举报
 回复
都是好东东呀,学习..
稍微有点无敌 2005-07-08
  • 打赏
  • 举报
 回复
学习！！！
MaxIE 2005-07-08
  • 打赏
  • 举报
 回复
MARK
加载更多回复（52）
经典css菜单，无限级朝右弹，代码短之极致了
本来在经典论坛下的朝右弹的二级菜单，代码极短。我改了一天，改成了无限级的。原来的二级菜单,三个文件，caidan.htm,style2.css,drop_down.jscaidan.htmhttp://...
css 右侧增加朝右箭头的样式
.arrow: before { position: absolute; top: 0; right: 30rpx; bottom: 0; display: block; margin: auto; width: 30rpx; height: 30rpx; color: #8799a3; content: "\E6A3"; text-align: center;......
常用css样式大全以及css属性代码大全
常用css样式大全 字体属性：(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD 样式 {font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常) 行高 ...
使用css画一个带线段朝右的箭头
【代码】使用css画一个带线段朝右的箭头。
css属性代码大全
css属性样式
JavaScript

87,992

社区成员

224,688

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章