鼠标滑过出现下拉菜单细节处理，高手请进...
1
悬赏园豆：10
[已解决问题]
解决于 2011-10-10 19:08
如下代码，实现鼠标滑过出现下拉菜单，我有两个问题，请高手帮忙。。。
①如何将下面的内容放在一个table的td中，下拉菜单就显示不出来，除非把table的height值设置够大。但是如果不放在table中该如何排版呢？
②即使不放在table中，如果下面还有内容的话下拉菜单的下半部分会被下面的内容给覆盖掉。这个层次该如何设置？
<ul>
<li><a href="#">USER MANAGE</a>
<ul>
<li><a href="#">Personal</a></li>
<li><a href="#">Group</a></li>
<li><a href="#">Administrator</a></li>
</ul>
</li>
<li><a href="#">MENU TWO</a>
<ul>
<li><a href="#">sub menu one</a></li>
<li><a href="#">sub menu one</a></li>
<li><a href="#">sub menu one</a></li>
</ul>
</li>
<li><a href="#">MENU THREE</a>
<ul>
<li><a href="#">sub menu one</a></li>
<li><a href="#">sub menu one</a></li>
<li><a href="#">sub menu one</a></li>
</ul>
</li>
</ul>
最佳答案
1
<ul>
<li><a href="#">USER MANAGE</a>
<ul>
<li><a href="#">Personal</a></li>
<li><a href="#">Group</a></li>
<li><a href="#">Administrator</a></li>
</ul>
</li>
<li><a href="#">MENU TWO</a>
<ul>
<li><a href="#">sub menu one</a></li>
<li><a href="#">sub menu one</a></li>
<li><a href="#">sub menu one</a></li>
</ul>
</li>
<li><a href="#">MENU THREE</a>
<ul>
<li><a href="#">sub menu one</a></li>
<li><a href="#">sub menu one</a></li>
<li><a href="#">sub menu one</a></li>
</ul>
</li>
</ul>
第一步，先把第一层的li的position属性定为相对定位。
第二步，把第二层的li的position属性定位绝对定位，这样就可以了
收获园豆：5
其他回答(3)
1
试试这个吧：
<!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: 120px; 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: 120px; 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{ wedisplay: 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="#">USER MANAGE</a>
<ul>
<li><a href="#">Personal</a></li>
<li><a href="#">Group</a></li>
<li><a href="#">Administrator</a></li>
</ul>
</li>
<li><a href="#">MENU TWO</a>
<ul>
<li><a href="#">sub menu one</a></li>
<li><a href="#">sub menu one</a></li>
<li><a href="#">sub menu one</a></li>
</ul>
</li>
<li><a href="#">MENU THREE</a>
<ul>
<li><a href="#">sub menu one</a></li>
<li><a href="#">sub menu one</a></li>
<li><a href="#">sub menu one</a></li>
</ul>
</li>
</ul>
</body>
</html>
效果：
收获园豆：2
1
jq:
<script type="text/javascript" src="jquery-1.5.min.js" ></script>
<script type="text/javascript">
$(function(){
$('#nav a').hover(function(){$(this).siblings('#nav ul').show();},function(){$(this).siblings('#nav ul').hide();});
$('#nav ul').hover(function(){$(this).show();},function(){$(this).hide();}); })
</script>
css:（这是基本样式，具体的其他例如颜色，字体等还要你自己加进来）
<style>
ul{list-style-type:none}
#nav{width:100%; margin:0; padding:0;}
#nav li{float:left; position:relative; padding:5px; }
#nav li ul{display:none; position:absolute; top:25px; left:0}
#nav li a{float:left; display:block; width:120px}
#nav li ul{width:120px}
#nav li li{float:left; padding:0}
</style>
html:
<ul id="nav">
<li><a href="#">USER MANAGE</a>
<ul>
<li><a href="#">Personal</a></li>
<li><a href="#">Group</a></li>
<li><a href="#">Administrator</a></li>
</ul>
</li>
<li><a href="#">MENU TWO</a>
<ul>
<li><a href="#">sub menu one</a></li>
<li><a href="#">sub menu one</a></li>
<li><a href="#">sub menu one</a></li>
</ul>
</li>
<li><a href="#">MENU THREE</a>
<ul>
<li><a href="#">sub menu one</a></li>
<li><a href="#">sub menu one</a></li>
<li><a href="#">sub menu one</a></li>
</ul>
</li>
</ul>
效果：
收获园豆：2
0
定位问题，你要把下拉部分的position设为absolutely，然后z-index设为一个较大的数，如：9999，就不会覆盖了
收获园豆：1