html5 - Drop Down Menu not pushing the contents down in IE7 -

i new on forum.

i developing website using html5 , css responsive design. have navigation menu behaves simple drop down menu desktop , laptop

but tablet , mobile has menu button

by clicking on menu button, alternatively appear , disappear display:blocks otherwise display:none , pushes contents of main area downward

all works fine in firefox, chrome , ie not pushing contents down in ie7

i stuck here since 2 days

here html code

<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> &#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> 

here css code desktop menu

    /*===========================================================================     * horizontal navigation     * setting nav in middle of maindiv     =============================================================================*/ #navdiv {     display:inline;     position:absolute;     /*display:block;*/     margin-left:30px;     border:1px solid red; } /*===========================================================================  * setting main menu @ margin of 20px logo div  =============================================================================*/ #nav ul {     /*margin-left: 20px;*/     list-style-type:none;     list-style:none; } /*===========================================================================  * setting list item main menu items  =============================================================================*/ ul#navigation li {     display:block;     float: left; } /*===========================================================================  * setting margin, color, text-decoration , display style main menu  =============================================================================*/ #nav > ul > li > {     margin: 27px 15px 27px 15px;     color: #ffffff;     text-decoration: none;     display: block; } /*===========================================================================  * changing background image main menu hover effects  =============================================================================*/ #nav ul li:hover {     background: url("images/menuonhover.png");     background-repeat: repeat-x; } /*===========================================================================  * setting drop down menus  * making visible 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 {     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 tablet , mobile, hidden default  ===============================================================================*/ #register #signup #menubutton {     display:none; } } 

and here code mobile menu

  /*===========================================================================  * vertical navigation  * setting nav in middle of 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  {     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 signup , login div  * setting register div position , 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 {     margin-right:3%; } 

please me find out bug ie7. please humble request don't refer jquery or javascript based menu don't want use them.