我是这个论坛的新人。
我正在使用HTML5和CSS开发一个具有响应式设计的网站。我有一个导航菜单，表现为桌面和笔记本电脑的简单下拉菜单
但对于平板电脑和手机，它有一个菜单按钮
通过单击菜单按钮，它会随着显示而显示和消失：否则显示块：none并向下推动主区域的内容
所有在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 ▾</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>
这是桌面菜单的css代码
/*===========================================================================
* Horizontal Navigation
* Setting up the nav in the middle of the mainDiv
=============================================================================*/
#navDiv {
display:inline;
position:absolute;
/*display:block;*/
margin-left:30px;
border:1px solid red;
}
/*===========================================================================
* Setting up the main menu at a margin of 20px from logo div
=============================================================================*/
#nav ul {
/*margin-left: 20px;*/
list-style-type:none;
list-style:none;
}
/*===========================================================================
* Setting up the list item as the main menu items
=============================================================================*/
ul#navigation li {
display:block;
float: left;
}
/*===========================================================================
* Setting up the margin, color, text-decoration and display style for main menu
=============================================================================*/
#nav > ul > li > a {
margin: 27px 15px 27px 15px;
color: #ffffff;
text-decoration: none;
display: block;
}
/*===========================================================================
* Changing the background image for main menu for hover effects
=============================================================================*/
#nav ul li:hover {
background: url("Images/MenuOnHover.png");
background-repeat: repeat-x;
}
/*===========================================================================
* Setting up the Drop Down Menus
* Making it visible for main menu hover effects
=============================================================================*/
#nav ul#navigation li ul {
display: none;
}
ul#navigation ul li {
clear: both;
width: 130px;
border: 0 none;
padding: 5px;
}
#nav ul#navigation li:hover > ul {
display: block;
opacity: 1;
}
/*===========================================================================
* Making basic decorations of drop down menu
=============================================================================*/
ul#navigation ul, ul#navigation ul li ul {
list-style: none;
margin: 0px;
padding: 5px;
position: absolute;
z-index: 99999;
width: 130px;
background: #f8f8f8;
box-shadow: 1px 1px 3px #ccc;
opacity: 0;
}
ul#navigation ul li {
clear: both;
width: 130px;
border: 0 none;
padding: 5px;
}
ul#navigation ul li a {
color: #000;
text-decoration: none;
}
ul#navigation ul li:hover {
background: #1E77A0;
text-decoration: none;
width: 125px;
}
ul#navigation ul li a:hover {
color: #fff;
}
/*===============================================================================
* menuButton for tablet and mobile, It is hidden by default
===============================================================================*/
#register #signup #menuButton {
display:none;
}
}
这是我的移动菜单代码
/*===========================================================================
* 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的菜单，因为我不想使用它们。