一个简单的问题，请高手帮忙

yujiang930 2006-07-07 08:57:59
==========请问怎样让二级菜单固定位置出现?

代码入下：
<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";
}

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";
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";
}
}
</SCRIPT>
<STYLE type="text/css">
body {
margin: 0px;
background-color: #C8C8C8;
}
UL {
PADDING: 0px;
MARGIN: 0px;
WIDTH: 100px;
BORDER: #ccc 0px solid;
DISPLAY:none;
POSITION: absolute;
LEFT: 130px;
TOP: 0px;
text-align: center;
vertical-align: middle;
}
LI {
BACKGROUND-COLOR:#E7E7E7;
PADDING: 0px;
MARGIN: 0px;
WIDTH: 130px;
BORDER: 0 solid;
POSITION: relative;/*relative;*/
height: 20px;
vertical-align: top;
text-align: center;
letter-spacing: normal;
word-spacing: normal;
white-space: normal;
clear: both;
float: none;
}

.menuA{
COLOR:#034B83; TEXT-DECORATION: none; WIDTH:100%; HEIGHT:20px;
}

.menuA:hover {
BACKGROUND: #E7E7E7; COLOR: #e2144a;
}

.menuLevel0{
POSITION: relative;
}
.menuLevel1{
background:#E7E7E7; LEFT: -130px; TOP: 0px;
}

<table width="180" height="131" border=0 cellspacing=0 onmouseover="mouseOverFun(this);" onmouseout="onmouseOutFun(this);" style="font-family: Tahoma;color: #606760;text-decoration: none;font-size: 8pt;">
<tr><td align="center" valign="bottom" class="menuLevel0">
<A href="#" class="menuA style2">便民服务</A>
<UL class="menuLevel1">
<LI><A class="menuA" href="#">病人安全</A>
<LI><A class="menuA" href="#">医政類</A>
<LI><A class="menuA" href="#">药政类</A>
<LI><A class="menuA" href="#">食品类</A>
<LI><A class="menuA" href="#">保健类</A>
</ul>
</td></tr>
<tr><td align="center" valign="bottom" class="menuLevel0">
<A href="#" class="menuA style2">便民服务</A>
<UL class="menuLevel1">
<LI><A class="menuA" href="#">病人安全</A>
<LI><A class="menuA" href="#">医政類</A>
<LI><A class="menuA" href="#">药政类</A>
<LI><A class="menuA" href="#">食品类</A>
<LI><A class="menuA" href="#">保健类</A>
</ul>
</td></tr>
<tr><td align="center" valign="bottom" class="menuLevel0">
<A href="#" class="menuA style2">便民服务</A>
<UL class="menuLevel1">
<LI><A class="menuA" href="#">病人安全</A>
<LI><A class="menuA" href="#">医政類</A>
<LI><A class="menuA" href="#">药政类</A>
<LI><A class="menuA" href="#">食品类</A>
<LI><A class="menuA" href="#">保健类</A>
</ul>
</td></tr>
<tr><td align="center" valign="bottom" class="menuLevel0">
<A href="#" class="menuA style2">便民服务</A>
<UL class="menuLevel1">
<LI><A class="menuA" href="#">病人安全</A>
<LI><A class="menuA" href="#">医政類</A>
<LI><A class="menuA" href="#">药政类</A>
<LI><A class="menuA" href="#">食品类</A>
<LI><A class="menuA" href="#">保健类</A>
</ul>
</td></tr>
<tr><td align="center" valign="bottom" class="menuLevel0">
<A href="#" class="menuA style2">便民服务</A>
<UL class="menuLevel1">
<LI><A class="menuA" href="#">病人安全</A>
<LI><A class="menuA" href="#">医政類</A>
<LI><A class="menuA" href="#">药政类</A>
<LI><A class="menuA" href="#">食品类</A>
<LI><A class="menuA" href="#">保健类</A>
</ul>
</td></tr>
<tr><td align="center" valign="bottom" class="menuLevel0">
<A href="#" class="menuA style2">便民服务</A>
<UL class="menuLevel1">
<LI><A class="menuA" href="#">病人安全</A>
<LI><A class="menuA" href="#">医政類</A>
<LI><A class="menuA" href="#">药政类</A>
<LI><A class="menuA" href="#">食品类</A>
<LI><A class="menuA" href="#">保健类</A>
</ul>
</td></tr>
</table>



==========请问怎样让二级菜单固定位置出现?
...全文
157 11 打赏 收藏 转发到动态 举报
写回复
用AI写文章
11 条回复
切换为时间正序
请发表友善的回复…
发表回复
hbhbhbhbhb1021 2006-07-10
  • 打赏
  • 举报
 回复
设置一个绝对固定位置的span
把要显示的ui里的innerHTML设置到span的innerHTML中
yujiang930 2006-07-10
  • 打赏
  • 举报
 回复
'==============代码修改了一下，请帮忙看看，急啊

<<!--DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<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";
}

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";
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";
}
}
</SCRIPT>
<STYLE type="text/css">
body {
margin: 0px;
background-color: #C8C8C8;
}
UL {
PADDING: 0px;
MARGIN: 0px;
WIDTH: 100px;
BORDER: #ccc 0px solid;
DISPLAY:none;
POSITION: absolute;
LEFT: 130px;
TOP: 0px;
text-align: center;
vertical-align: middle;
}
LI {
BACKGROUND-COLOR:#E7E7E7;
PADDING: 0px;
MARGIN: 0px;
WIDTH: 130px;
BORDER: 0 solid;
POSITION: relative;/*relative;*/
height: 20px;
vertical-align: top;
text-align: center;
letter-spacing: normal;
word-spacing: normal;
white-space: normal;
clear: both;
float: none;
}

.menuA{
COLOR:#034B83; TEXT-DECORATION: none; WIDTH:100%; HEIGHT:20px;
}

.menuA:hover {
BACKGROUND: #E7E7E7; COLOR: #e2144a;
}

.menuLevel0{
POSITION: relative;
}
.menuLevel1{
background:#E7E7E7; LEFT: -130px; TOP: 0px;
}
</STYLE>
<style type="text/css">
<!--
.style2 {color: #FFFFFF}
-->
</style>
</head>
<body leftmargin="0" rightmargin="0" bottommargin="0" bgcolor="#C8C8C8">
<table><tr><td width=1000 align="center"><table width="200" height="131" border=0 cellspacing=0 onmouseover="mouseOverFun(this);" onmouseout="onmouseOutFun(this);" style="font-family: Tahoma;color: #606760;text-decoration: none;font-size: 8pt;">
<tr><td align="center" valign="bottom" class="menuLevel0">
<A href="#" class="menuA style2">便民服务</A>
<UL class="menuLevel1">
<LI><A class="menuA" href="#">病人安全</A>
<LI><A class="menuA" href="#">医政類</A>
<LI><A class="menuA" href="#">药政类</A>
<LI><A class="menuA" href="#">食品类</A>
<LI><A class="menuA" href="#">保健类</A>
</ul>
</td>
</tr>
<tr><td align="center" valign="bottom" class="menuLevel0">
<A href="#" class="menuA style2">便民服务</A>
<UL class="menuLevel1">
<LI><A class="menuA" href="#">病人安全</A>
<LI><A class="menuA" href="#">医政類</A>
<LI><A class="menuA" href="#">药政类</A>
<LI><A class="menuA" href="#">食品类</A>
<LI><A class="menuA" href="#">保健类</A>
</ul>
</td>
</tr>
<tr><td align="center" valign="bottom" class="menuLevel0">
<A href="#" class="menuA style2">便民服务</A>
<UL class="menuLevel1">
<LI><A class="menuA" href="#">病人安全</A>
<LI><A class="menuA" href="#">医政類</A>
<LI><A class="menuA" href="#">药政类</A>
<LI><A class="menuA" href="#">食品类</A>
<LI><A class="menuA" href="#">保健类</A>
</ul>
</td>
</tr>
<tr><td align="center" valign="bottom" class="menuLevel0">
<A href="#" class="menuA style2">便民服务</A>
<UL class="menuLevel1">
<LI><A class="menuA" href="#">病人安全</A>
<LI><A class="menuA" href="#">医政類</A>
<LI><A class="menuA" href="#">药政类</A>
<LI><A class="menuA" href="#">食品类</A>
<LI><A class="menuA" href="#">保健类</A>
</ul>
</td>
</tr>
<tr><td align="center" valign="bottom" class="menuLevel0">
<A href="#" class="menuA style2">便民服务</A>
<UL class="menuLevel1">
<LI><A class="menuA" href="#">病人安全</A>
<LI><A class="menuA" href="#">医政類</A>
<LI><A class="menuA" href="#">药政类</A>
<LI><A class="menuA" href="#">食品类</A>
<LI><A class="menuA" href="#">保健类</A>
</ul>
</td>
</tr>
<tr><td align="center" valign="bottom" class="menuLevel0">
<A href="#" class="menuA style2">便民服务</A>
<UL class="menuLevel1">
<LI><A class="menuA" href="#">病人安全</A>
<LI><A class="menuA" href="#">医政類</A>
<LI><A class="menuA" href="#">药政类</A>
<LI><A class="menuA" href="#">食品类</A>
<LI><A class="menuA" href="#">保健类</A>
</ul>
</td>
</tr>
</table></td></tr></table>

'===================也就是说
<LI><A class="menuA" href="#">病人安全</A>
<LI><A class="menuA" href="#">医政類</A>
<LI><A class="menuA" href="#">药政类</A>
<LI><A class="menuA" href="#">食品类</A>
<LI><A class="menuA" href="#">保健类</A>

这几个项目出现的位置都是一样的
yujiang930 2006-07-10
  • 打赏
  • 举报
 回复
to hbhbhbhbhb1021(天外水火(我要多努力))
谢谢你的回答

我想要的结果是 当鼠标放到主菜单上时，自动弹出来的二级菜单固定在一个位置出现，而不是随着主菜单的位置变化
TSD 2006-07-10
  • 打赏
  • 举报
 回复
设置层的位置不行吗?
yujiang930 2006-07-10
  • 打赏
  • 举报
 回复
哎，我用一个笨办法解决了
yujiang930 2006-07-10
  • 打赏
  • 举报
 回复
怎么设置的？不太明白，能不能把代码写一下，谢谢先了
hbhbhbhbhb1021 2006-07-07
  • 打赏
  • 举报
 回复
<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";
}

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";
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";
}
}
</SCRIPT>
<STYLE type="text/css">
body {
margin: 0px;
background-color: #C8C8C8;
}
UL {
PADDING: 0px;
MARGIN: 0px;
WIDTH: 100px;
BORDER: #ccc 0px solid;
DISPLAY:none;
POSITION: absolute;
LEFT: 130px;
TOP: 0px;
text-align: center;
vertical-align: middle;
}
LI {
BACKGROUND-COLOR:#E7E7E7;
PADDING: 0px;
MARGIN: 0px;
WIDTH: 130px;
BORDER: 0 solid;
POSITION: relative;/*relative;*/
height: 20px;
vertical-align: top;
text-align: center;
letter-spacing: normal;
word-spacing: normal;
white-space: normal;
clear: both;
float: none;
}

.menuA{
COLOR:#034B83; TEXT-DECORATION: none; WIDTH:100%; HEIGHT:20px;
}

.menuA:hover {
BACKGROUND: #E7E7E7; COLOR: #e2144a;
}

.menuLevel0{
POSITION: relative;
}
.menuLevel1{
background:#E7E7E7; TOP: 0px;
}
</style>

<table width="180" height="131" border=0 cellspacing=0 onmouseover="mouseOverFun(this);" onmouseout="onmouseOutFun(this);" style="font-family: Tahoma;color: #606760;text-decoration: none;font-size: 8pt;">
<tr><td align="center" valign="bottom" class="menuLevel0">
<A href="#" class="menuA style2">便民服务</A>
<UL class="menuLevel1">
<LI><A class="menuA" href="#">病人安全</A>
<LI><A class="menuA" href="#">医政類</A>
<LI><A class="menuA" href="#">药政类</A>
<LI><A class="menuA" href="#">食品类</A>
<LI><A class="menuA" href="#">保健类</A>
</ul>
</td></tr>
<tr><td align="center" valign="bottom" class="menuLevel0">
<A href="#" class="menuA style2">便民服务</A>
<UL class="menuLevel1">
<LI><A class="menuA" href="#">病人安全</A>
<LI><A class="menuA" href="#">医政類</A>
<LI><A class="menuA" href="#">药政类</A>
<LI><A class="menuA" href="#">食品类</A>
<LI><A class="menuA" href="#">保健类</A>
</ul>
</td></tr>
<tr><td align="center" valign="bottom" class="menuLevel0">
<A href="#" class="menuA style2">便民服务</A>
<UL class="menuLevel1">
<LI><A class="menuA" href="#">病人安全</A>
<LI><A class="menuA" href="#">医政類</A>
<LI><A class="menuA" href="#">药政类</A>
<LI><A class="menuA" href="#">食品类</A>
<LI><A class="menuA" href="#">保健类</A>
</ul>
</td></tr>
<tr><td align="center" valign="bottom" class="menuLevel0">
<A href="#" class="menuA style2">便民服务</A>
<UL class="menuLevel1">
<LI><A class="menuA" href="#">病人安全</A>
<LI><A class="menuA" href="#">医政類</A>
<LI><A class="menuA" href="#">药政类</A>
<LI><A class="menuA" href="#">食品类</A>
<LI><A class="menuA" href="#">保健类</A>
</ul>
</td></tr>
<tr><td align="center" valign="bottom" class="menuLevel0">
<A href="#" class="menuA style2">便民服务</A>
<UL class="menuLevel1">
<LI><A class="menuA" href="#">病人安全</A>
<LI><A class="menuA" href="#">医政類</A>
<LI><A class="menuA" href="#">药政类</A>
<LI><A class="menuA" href="#">食品类</A>
<LI><A class="menuA" href="#">保健类</A>
</ul>
</td></tr>
<tr><td align="center" valign="bottom" class="menuLevel0">
<A href="#" class="menuA style2">便民服务</A>
<UL class="menuLevel1">
<LI><A class="menuA" href="#">病人安全</A>
<LI><A class="menuA" href="#">医政類</A>
<LI><A class="menuA" href="#">药政类</A>
<LI><A class="menuA" href="#">食品类</A>
<LI><A class="menuA" href="#">保健类</A>
</ul>
</td></tr>
</table>
wideroad 2006-07-07
  • 打赏
  • 举报
 回复
看来对于写javascript程序的人来讲，学会css也是很有必要的。
zeroleonhart 2006-07-07
  • 打赏
  • 举报
 回复
lazy to see the codes....
BlueDestiny 2006-07-07
  • 打赏
  • 举报
 回复
给你一个好看的CSSmenu

<!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">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>nav</title>

<script language="javascript">

// 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;

</script>

<style type="text/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; /* IE6 Bug */

border-bottom: 0;

}



/* Holly Hack. IE Requirement \*/

* html ul li { float: left; height: 1%; }

* html ul li a { height: 1%; }

/* End */



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

-->

</style>

</head>



<body>

<ul id="nav">

<li><a href="#">Home</a></li>

<li><a href="#">About</a>

<ul>

<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></li>

<li><a href="#">Internet Marketing</a></li>

<li><a href="#">Hosting</a></li>

<li><a href="#">Domain Names</a></li>

<li><a href="#">Broadband</a></li>

</ul>

</li>

<li><a href="#">Contact Us</a>

<ul>

<li><a href="#">United Kingdom</a></li>

<li><a href="#">France</a></li>

<li><a href="#">USA</a></li>

<li><a href="#">Australia</a></li>

</ul>

</li>



</ul>

</body>

</html>


ranranhu 2006-07-07
  • 打赏
  • 举报
 回复
楼主漏了</style>
求高手帮忙解决下问题，谢谢
宏计算，无法运行
DIRECTDRAW 读取24位位图出问题 请高手看看
该程序是WINDOWS 游戏编程大师技巧里的读入24位图的程序，试了了几幅图片没问题 但是后来这幅24位图片（sprite.bmp)在读入时只有原来一半高且过一段时间由于异常跳出 请帮忙找找问题 谢谢
使用ChatGPT解决8个办公自动化问题
通过本课程的学习，您学习到如何使用用ChatGPT解决办公自动化问题，具体内容如下。 一、ChatGPT编写程序 编写VBA...三、数据统计与分析 批量统计文档页数和字数 将多个Excel文件合并为一个文件 四、后记 还有哪些要做
XML做数据库的论坛源码，高手帮忙啊！
不错的论坛源码，.net方向。 朋友给的，可是发现配置有问题，提示26的错误，可是XML得配置我又不太懂，在此希望有高手告诉我解决办法，谢谢@！
hookSocket问题程序
此程序不能成功运行，请高手帮忙看看哪里出问题了
JavaScript

87,902

社区成员

224,615

社区内容

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

加载中

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

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

+ 用AI写文章