div 层重叠的恼人问题。

罢懂 2009-05-10 11:49:23
<HTML>
<script>
function menuFix() {
var sfEls = document.getElementById("cl").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {


sfEls[i].onmouseover=function() {
modu(this);
}
sfEls[i].onMouseDown=function() {
modu(this);
}
sfEls[i].onMouseUp=function() {
modu(this);
}
sfEls[i].onmouseout=function() {
var sfspan = this.getElementsByTagName("span");
sfspan[0].className=sfspan[0].className.replace(new RegExp("( ?|^)open\\b"), "");
this.className=this.className.replace(new RegExp("( ?|^)on\\b"), "");
}
}
}
function modu(a){
var sfspan = a.getElementsByTagName("span");
sfspan[0].className+=(sfspan[0].className.length>0? " ": "") + "open";
a.className+=(a.className.length>0? " ": "") + "on";
}
</script>
<HEAD>
<STYLE type="text/css">
<!--
#cl {width:180px;}
#cl .black {float:left;font-weight:bold;}
#cl li {width:100%;height:14px;padding:5px 0 5px 5px;position:relative;text-align:left;}
#cl li span{float:left;width:120px;overflow:hidden; white-space:nowrap;position:absolute;z-

index:2;left:60px;top:5px;padding-left:5px;}
#cl li .open{width:100px;padding:4px 5px;top:-1px;background:#fff7ee;border:1px solid #f5b669;border-

left:0;overflow:visible;white-space:normal;z-index:4;}
#cl .on {padding:4px 0 4px 5px;background:#fff7ee;border-top:1px solid #f5b669;border-bottom:1px solid #f5b669;}
-->
</STYLE>
</HEAD>

<BODY>
<ul id="cl">
<li><a href="#" class="black">办公设备</a>
<span>1<a href="#">办公设备</a> <a href="#">办公设备</a> <a href="#">办公设备</a> <a href="#">办公设备</a>

<a href="#">办公设备</a> <a href="#">办公设备</a> <a href="#">办公设备</a> </span>
</li>
<li><a href="#" class="black">办公设备</a>
<span>2<a href="#">办公设备</a> <a href="#">办公设备</a> <a href="#">办公设备</a> <a href="#">办公设备</a>

<a href="#">办公设备</a> <a href="#">办公设备</a> <a href="#">办公设备</a> </span>
</li>
<li><a href="#" class="black">办公设备</a>
<span>3<a href="#">办公设备</a> <a href="#">办公设备</a> <a href="#">办公设备</a> <a href="#">办公设备</a>

<a href="#">办公设备</a> <a href="#">办公设备</a> <a href="#">办公设备</a> </span>
</li><li><a href="#" class="black">办公设备</a>
<span>4<a href="#">办公设备</a> <a href="#">办公设备</a> <a href="#">办公设备</a> <a href="#">办公设备</a>

<a href="#">办公设备</a><a href="#">办公设备</a> <a href="#">办公设备</a> <a href="#">办公设备</a> <a href="#">办公设

备</a> <a href="#">办公设备</a> <a href="#">办公设备</a> <a href="#">办公设备</a> </span>
</li>
<li><a href="#" class="black">办公设备</a>
<span>5<a href="#">办公设备</a> <a href="#">办公设备</a> <a href="#">办公设备</a> <a href="#">办公设备</a>

<a href="#">办公设备</a> <a href="#">办公设备</a> <a href="#">办公设备</a> </span>
</li>
</ul>
<script>menuFix();</script>
</BODY>
</HTML>


帮帮忙,总是重叠显示,帮帮忙吧。郁闷死我了。
我想要显示出来的层完全的不秀明。。搞不定了。郁闷了。
整了一下午了。。郁闷了。。
...全文
149 2 打赏 收藏 转发到动态 举报
写回复
用AI写文章
2 条回复
切换为时间正序
请发表友善的回复…
发表回复
caiying2009 2009-05-11
  • 打赏
  • 举报
回复
this?

<HTML>
<script>
function menuFix() {
var sfEls = document.getElementById("cl").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {


sfEls[i].onmouseover=function() {
modu(this);
}
sfEls[i].onMouseDown=function() {
modu(this);
}
sfEls[i].onMouseUp=function() {
modu(this);
}
sfEls[i].onmouseout=function() {
var sfspan = this.getElementsByTagName("span");
sfspan[0].className=sfspan[0].className.replace(new RegExp("( ?|^)open\\b"), "");
this.className=this.className.replace(new RegExp("( ?|^)on\\b"), "");
}
}
}
function modu(a){
var sfspan = a.getElementsByTagName("span");
sfspan[0].className+=(sfspan[0].className.length>0? " ": "") + "open";
a.className+=(a.className.length>0? " ": "") + "on";
}
</script>
<HEAD>
<STYLE type="text/css">
<!--
*{padding:0;0}
#cl {width:180px;}
#cl .black {float:left;font-weight:bold;}
#cl li {width:100%;height:14px;padding:5px 0 5px 5px;position:relative;text-align:left;}
#cl li span{margin-left:30px;float:left;width:120px;overflow:hidden; white-space:nowrap;position:absolute;z-index:2;left:60px;top:5px;padding-left:5px;}/* +margin-left:30px; */
#cl li .open{width:100px;padding:4px 5px;top:-1px;background:#fff7ee;border:1px solid #f5b669;border-left:0;overflow:visible;white-space:normal;z-index:4;}
#cl .on {padding:4px 0 4px 5px;background:#fff7ee;border-top:1px solid #f5b669;border-bottom:1px solid #f5b669;z-index:100}/* +z-index:100 */
-->
</STYLE>
</HEAD>

<BODY>
<ul id="cl">
<li><a href="#" class="black">办公设备</a>
<span>1<a href="#">办公设备</a> <a href="#">办公设备</a> <a href="#">办公设备</a> <a href="#">办公设备</a>

<a href="#">办公设备</a> <a href="#">办公设备</a> <a href="#">办公设备</a> </span>
</li>
<li><a href="#" class="black">办公设备</a>
<span>2<a href="#">办公设备</a> <a href="#">办公设备</a> <a href="#">办公设备</a> <a href="#">办公设备</a>

<a href="#">办公设备</a> <a href="#">办公设备</a> <a href="#">办公设备</a> </span>
</li>
<li><a href="#" class="black">办公设备</a>
<span>3<a href="#">办公设备</a> <a href="#">办公设备</a> <a href="#">办公设备</a> <a href="#">办公设备</a>

<a href="#">办公设备</a> <a href="#">办公设备</a> <a href="#">办公设备</a> </span>
</li><li><a href="#" class="black">办公设备</a>
<span>4<a href="#">办公设备</a> <a href="#">办公设备</a> <a href="#">办公设备</a> <a href="#">办公设备</a>

<a href="#">办公设备</a><a href="#">办公设备</a> <a href="#">办公设备</a> <a href="#">办公设备</a> <a href="#">办公设

备</a> <a href="#">办公设备</a> <a href="#">办公设备</a> <a href="#">办公设备</a> </span>
</li>
<li><a href="#" class="black">办公设备</a>
<span>5<a href="#">办公设备</a> <a href="#">办公设备</a> <a href="#">办公设备</a> <a href="#">办公设备</a>

<a href="#">办公设备</a> <a href="#">办公设备</a> <a href="#">办公设备</a> </span>
</li>
</ul>
<script>menuFix();</script>
</BODY>
</HTML>

罢懂 2009-05-11
  • 打赏
  • 举报
回复
Very good!~Thank you!

61,110

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

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