请帮看看用CSS和Javascript做的下拉菜单，为什么会这样？

ynduanlian 2013-10-27 02:00:51

代码：
CSS：
#navMenu ul{padding:0; margin:0; list-style:none; }
#navMenu li{ float:left; font-size:14px; text-indent:0px; position:relative; margin-right:10px;}
#navMenu li:hover ul, li:over ul{display:block;}
#navMenu li ul{ display:none; top:20px; position:absolute; }
#navMenu li ul li{float:none;}
#navMenu ul li a {display:block; font-size:12px; border:1px solid #ccc; padding:3px; text-decoration:none; color:#777; }
#navMenu li a:hover{ background-color:#f4f4f4; }

Javascript :
function startList() {
// if (document.all && document.getElementById)
{
navRoot = document.getElementById("navMenu");
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","");
}
}
}
}
}

HTML:
<table><tr><td><ul id="navMenu">
<li><a href="">网络应用</a>
<ul>
<li><a href="AR.HTM">网页制做工具</a></li>
<li><a href="ar.htm">网站管理工具</a></li>
</ul>
</li>
<li>OFFICE办公及文字处理转换工具
<ul>
<li>Word批量处理工具</li>
<li>Excel批量处理工具</li>
<li></li>
</ul>
</li>
<li>多媒体、图形图像处理
<ul>
<li>批量缩略图工具</li>
<li></li>
</ul>
</li>
</ul></td>
</tr></table>

现在存在如下问题：
1、在IE8下可以出现鼠标移到"网络应用“上时，弹出二级菜单（网页制作工具、网站管理工具），但是这二个二级菜单的宽带明显很窄，出现了折行显示，不知是什么原因？
2、在Chrome浏览器下，鼠标移到"网络应用“上时，没有任何反应，二级菜单不出现。

请问要如何解决？

...全文

100 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

魔术世界中文版 2013-10-27

打赏
举报


<!DOCTYPE html> 
<style>
div,ul,li{margin:0;padding:0}
#div2{display:none;margin-top:2px;}
ul#ul1 li{float:left;width:100px;line-height:30px;text-align:center;margin-left:1px;background-color:yellow;}
ul#ul1 li.second{height:30px}
ul#ul1 li.first:hover #div2{display:block;z-index:999;background-color:#ffffff}
#div2 ul#ul2 li{height:30px;line-height:30px;width:100px;margin-top:2px;background-color:red}
#div2 ul#ul2 li:hover{background-color:#fff}
#content{clear:both;position:absolute;top:40px}
</style>

<div class="nav">
	<ul id="ul1">
		<li class="first"><a href="#">首页</a> 
			<div id="div2">
				<ul id="ul2">
					<li><a href="#">子菜单1</a></li>
					<li><a href="#">子菜单2</a></li>
					<li><a href="#">子菜单3</a></li>
				</ul>
			</div>
		</li>
		<li class="second"><a href="#">风格展示</a></li>
		<li class="second"><a href="#">活动专题</a></li>
	</ul>
</div>
<div id="content">
111111111111
</div>

ynduanlian 2013-10-27

打赏
举报

上面的效果确实不错，但还有个问题，弹出菜单后，二级菜单不是浮动在网页下面内容的上层，而是独占了网页的一横条，网页下面的部分会被往下移动。不知怎么样可以让网页后面部分不往下移，而是固定，让菜单在这部分的上层？

魔术世界中文版 2013-10-27

打赏
举报

不需要用JS和<table>,CSS直接就可以实现，参考如下


<!DOCTYPE html> 
<style>
div,ul,li{margin:0;padding:0}
#div2{display:none;margin-top:2px;}
ul#ul1 li{float:left;width:100px;line-height:30px;text-align:center;margin-left:1px;background-color:yellow;}
ul#ul1 li.second{height:30px}
ul#ul1 li.first:hover #div2{display:block}
#div2 ul#ul2 li{height:30px;line-height:30px;width:100px;margin-top:2px;background-color:red}
#div2 ul#ul2 li:hover{background-color:#fff}
</style>

<div class="nav">
	<ul id="ul1">
		<li class="first"><a href="#">首页</a> 
			<div id="div2">
				<ul id="ul2">
					<li><a href="#">子菜单1</a></li>
					<li><a href="#">子菜单2</a></li>
					<li><a href="#">子菜单3</a></li>
				</ul>
			</div>
		</li>
		<li class="second"><a href="#">风格展示</a></li>
		<li class="second"><a href="#">活动专题</a></li>
	</ul>
</div>