Html 在IE7中不向下推内容的下拉菜单

我是这个论坛的新手

我正在开发一个网站使用HTML5和CSS与响应设计。我有一个导航菜单，它可以作为台式机和笔记本电脑的简单下拉菜单

但对于平板电脑和手机，它有一个菜单按钮

通过单击菜单按钮，它交替出现和消失，显示：块，否则显示：无，并向下推主区域的内容

所有这些在Firefox、Chrome和IE中都可以正常工作，但在IE7中并没有将内容往下推

我被困在这里两天了

这是我的HTML代码

<div id="wrapper">
<header id="topHeader">
<div id="topDiv">
<div id="mainDiv">
<div id="logo">
<div itemscope itemtype="http://schema.org/Organization"> <a itemprop="url" href="/Default.aspx"> <img itemprop="logo" src="/App_Themes/Default/Images//logo.png" alt=""> </a> </div>
    </div>
    <div id="navDiv">

    <nav id="nav">
      <ul id="navigation">
        <li id="mobileSignup"> <a href="#"><h3>Signup</h3></a>
        </li>
        <li><a href="/component/component-overview.aspx">
          <h3>Components</h3>
          </a></li>
        <li><a href="/pricing.aspx">
          <h3>Pricing</h3>
          </a></li>
        <li> <a href="/consulting/partners.aspx">
          <h3>Partners</h3>
          </a>


        </li>
        <li> <a href="/about/about-contact.aspx">
          <h3> About &#x025be;</h3>
          </a>
          <ul>
            <li><a href="/about/blog.aspx" >
              <h3>Blog</h3>
              </a></li>
            <li><a href="/about/about-contact.aspx" >
              <h3>Contact</h3>
              </a></li>
            <li><a href="/about/about-FAQ.aspx" >
              <h3>FAQ</h3>
              </a></li>                
            <li><a href="/about/about-timeline.aspx" >
              <h3>Timeline</h3>
              </a></li>
          </ul>
        </li>
      </ul>
    </nav>
    </div>
    <div id="register">
      <div id="contact">
        <h5> <a href="tel:18666686402"><img src="/App_Themes/Default/Images/Phone.png" id="phoneImg" alt="" /></a><span id="phoneNumber"> 1 866 668 6402</span></h5>
      </div>
      <div id="signup"><a href="/signup.aspx" onMouseOver="document.getElementById('signupImg').src='/App_Themes/Default/Images/SignUpbuttonOnHover.png';"  onMouseOut="document.getElementById('signupImg').src='/App_Themes/Default/Images/SignUpbutton.png'"><img src="/App_Themes/Default/Images/SignUpbutton.png" id="signupImg" alt=""></a>
      <a href="#" onclick="menu_visibility('navDiv');"><img src="/App_Themes/Default/Images/menuButton.png" alt="" id="menuButton"></a>

      </div>
      <div id="login">
        <h3>
        <a href="login"> Login</a>
        </h3>
        </div>
    </div>
    </div>
</div>
    </header>
</div>
<div id="container">
</div>

这是我的手机菜单代码

  /*===========================================================================
 * Vertical Navigation
 * Setting up the nav in the middle of the mainDiv
 =============================================================================*/
#navDiv {
    float:left;
    margin-top: 10px;
    left: 0px;
    width: 100%;
    background: #161616;
    display:none;
}
#nav {
    width: 25%;
    background: #161616;
}
#nav ul li {
    list-style:none;
    list-style-type:none;
    position:relative;
}
#nav ul li h3 {
    margin: 12px auto;
}
#nav ul  li  a {
    text-decoration: none;
    color:#fff;
}
#nav ul li:hover ul li {
    margin:12px;
}
#nav ul li ul {
    display: none;
    opacity: 1;
}
#navigation li:hover > ul {
    display: block;
    margin: 15px 10px;
}
ul#navigation #mobileSignup {
    display: block;
}

/*===========================================================================
 * register div contains the signup and login div
 * Setting up the register div position and text color
 =============================================================================*/
#register {
    position:absolute;
    top: 1px;
    right: 2%;
    width:130px;
}
#register #contact {
    float:left;
    margin-top:15px;
    margin-right:15px;
}
#register #contact #phoneNumber {
    display:none;
}
#register #signup {
    margin-top: 8px;
    margin-left: 3%;
}
#register #signup #signupImg {
    display:none;
}
#register #signup #menuButton {
    display:inline;
    margin-top:10px;
}
#register #login a {
    margin-right:3%;
}

---

请帮我找出IE7的这个bug。请不要提及JQuery或基于javascript的菜单，因为我不想使用它们。一个很好的调试方法是使用IE8开发工具，然后使用兼容模式转换为IE7。这可能有助于你深入了解这个问题。谢谢dseibert，我正在使用IE10的Windows8。请您指导我如何使用IE10开发人员工具调试此问题。让我知道这是否适用于您：是的，我已经在使用相同的IE10开发人员工具，但仍然找不到解决方案，这就是我将问题发布在此处的原因。以下是一些可能有帮助的内容。这似乎是IE版本中一个非常好的不一致列表。6/7/8

  /*===========================================================================
 * Vertical Navigation
 * Setting up the nav in the middle of the mainDiv
 =============================================================================*/
#navDiv {
    float:left;
    margin-top: 10px;
    left: 0px;
    width: 100%;
    background: #161616;
    display:none;
}
#nav {
    width: 25%;
    background: #161616;
}
#nav ul li {
    list-style:none;
    list-style-type:none;
    position:relative;
}
#nav ul li h3 {
    margin: 12px auto;
}
#nav ul  li  a {
    text-decoration: none;
    color:#fff;
}
#nav ul li:hover ul li {
    margin:12px;
}
#nav ul li ul {
    display: none;
    opacity: 1;
}
#navigation li:hover > ul {
    display: block;
    margin: 15px 10px;
}
ul#navigation #mobileSignup {
    display: block;
}

/*===========================================================================
 * register div contains the signup and login div
 * Setting up the register div position and text color
 =============================================================================*/
#register {
    position:absolute;
    top: 1px;
    right: 2%;
    width:130px;
}
#register #contact {
    float:left;
    margin-top:15px;
    margin-right:15px;
}
#register #contact #phoneNumber {
    display:none;
}
#register #signup {
    margin-top: 8px;
    margin-left: 3%;
}
#register #signup #signupImg {
    display:none;
}
#register #signup #menuButton {
    display:inline;
    margin-top:10px;
}
#register #login a {
    margin-right:3%;
}