关于 鼠标经过时出现下拉菜单，移走后菜单消失 的问题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,以实现继续垂直显示。