关于 鼠标经过时出现上拉菜单，移走后菜单消失 的有关问题SOS

关于 鼠标经过时出现下拉菜单，移走后菜单消失 的问题SOS
以下是脚本 
 function down()
  {
  document.getElementById("nav2").style.display="none";  
  document.getElementById("nav3").style.display="none";
  }
  function displaySubMenu(li) { 
  var subMenu = li.getElementsByTagName("ul")[0]; 
  subMenu.style.display = "block"; 
  } 
  function hideSubMenu(li) { 
  var subMenu = li.getElementsByTagName("ul")[0]; 
  subMenu.style.display = "none"; 
  }
 window.onload = function()
 {
  down(); 
}//此处是为了让浏览器先加载完所有文件再运行脚本

以下是html语句(导航栏)
  <ul id="u1">
  <li ><a href="#"><img src="picture/提醒.png" title="提醒"/></a> </li>
  <li ><a href="#" ><img src="picture/邮件.png" title="邮件"/></a> </li>
   
  <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)" id="first"> 
  <a href="#" ><img runat="server" id="image" src="~/picture/头像.png" title="头像"/>:用户</a>
  <ul id="nav3">
  <li ><a href="#" >个人信息</a></li>
  <li><a href="#">我的好友</a></li>
  <li><a href="#">退出</a></li>  
  </ul>
  </li>
   
  <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)" id="second"> 
  <img src="picture/上传.png" /><em style="color:Black">1111</em>
  <ul id="nav2" >
  <li ><a href="#">单张上传</a></li>
  <li><a href="#">批量上传</a></li>
  <li><a href="#">我的相册</a></li>
  </ul>
  </li>  
  </ul>
运行之后发现正常，但是我继续往下面做东西后，问题就来了：比如我在这个导航栏下面打一整句话，然后把鼠标移到下拉菜单会显示的地方，结果下拉菜单把整句话都给往下推了!!!找了一个下午不知道问题出在哪里，本来想附上图，但是上传不上去，求解各路大神！
补充一下，这是运用JS+ul 的办法来实现的，ul在导航栏里，设置的样式是：float：left 以实现横向排版li,子菜单是clear了:clear:right,以实现继续垂直显示。

------解决方案--------------------
<ul id="nav2" >
<ul id="nav3" >
和它们的父容器中都需要加上进行微调，具体的你自己慢慢试就知道了。加了的话就不会把别的内容顶下去了
但可能会改变当前已有的效果，所以可能需要你自己进行微调