1. 爱易网页
  2. HTML教程
  3. 二级菜单出现会把下面的内容给顶下去，使用绝对定位也不行，应该如何解决

二级菜单出现会把下面的内容给顶下去，使用绝对定位也不行，应该如何解决

日期：2014-05-17　 浏览次数：20710 次

二级菜单出现会把下面的内容给顶下去，使用绝对定位也不行，应该怎么解决？
<!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> 
    <title>通用的二级菜单</title> 
    <style type="text/css"> 
    #menu 
    { 
        width:300px; 
        margin:auto; 
    } 
#div1 
{ 
display:none; 
font-size:12px; 
position:relative; 
left:0px; 
top:0px; 
background-color:White; 
padding:5px 10px 0px 10px; 
width:320px; 
} 
#div2 
{ 
display:none; 
font-size:12px; 
position:relative; 
left:50px; 
top:0px; 
background-color:White; 
padding:5px 10px 0px 10px; 
width:320px; 
} 
#div3 
{ 
display:none; 
font-size:12px; 
position:relative; 
left:120px; 
top:0px; 
background-color:White; 
padding:5px 10px 0px 10px; 
width:320px; 
} 
#div4 
{ 
display:none; 
font-size:12px; 
position:relative; 
left:200px; 
top:0px; 
background-color:White; 
padding:5px 10px 0px 10px; 
width:320px; 
} 
    </style> 
    <script language="javascript" type="text/javascript"> 
     //显示层 
     function showDiv(divName) 
     { 
     document.getElementById(divName).style.display = "block"; 
     } 
     //隐藏层 
     function hiddenDiv(divName) 
     { 
     document.getElementById(divName).style.display = "none"; 
     } 
    </script> 
</head> 
<body> 
<div id="menu"> 
<a href="#" onmouseover="showDiv('div1')" onmouseout="hiddenDiv('div1')">菜单一</a> 
 |  
<a href="#" onmouseover="showDiv('div2')" onmouseout="hiddenDiv('div2')">菜单二</a> 
 |  
<a href="#" onmouseover="showDiv('div3')" onmouseout="hiddenDiv('div3')">菜单三</a> 
 |  
<a href="#" onmouseover="showDiv('div4')" onmouseout="hiddenDiv('div4')">菜单四</a> 
<div id="div1" onmouseover="showDiv(this.id)" onmouseout="hiddenDiv(this.id)"> 
<a href="#">子菜单一</a> 
</div> 
<div id="div2" onmouseover="showDiv(this.id)" onmouseout="hiddenDiv(this.id)"> 
<a href="#">子菜单一</a> 
<a href="#">子菜单二</a> 
</div> 
<div id="div3" onmouseover="showDiv(this.id)" onmouseout="hiddenDiv(this.id)"> 
<a href="#">子菜单一</a> 
<a href="#">子菜单二</a>&

相关资料更多>

  1. 求教background属性值的懂得
  2. ie6下这个页面的弹出层下面如何多出一个空区域
  3. 导入CSS式样的几种办法
  4. 帮解决一个简单有关问题，回复正确立即给分
  5. html 五 study
  6. 怎么实现“垂直缩进”
  7. 帮忙 网页制作,该如何解决
  8. HTML教程-换行
  9. 求修改下。该如何解决