Help me with the CSS of IE - css

Question

I am having a problem with my website, www.diaplasisgym.com. The problem is the sub menu. It is working fine in Firefox, Chrome and Safari, but if you open it with IE the slide bar is hiding the submenu. How i can fix this?
Here the code of the menu and submenu:
#mainMenu {
position:absolute;
bottom:-80px;
left:0px;
background:url(images/menu.png) no-repeat;
width: 961px;
height:98px;
}
#mainMenu ul li {
float:right;
height:70px;
}
#mainMenu ul li a {
font-weight:bold;
display:block;
color:#ffffff;
padding:25px 20px 0;
font-size:15px;
}
#mainMenu ul li a span {
font-size:10px;
color:#999;
}
#mainMenu ul li a:hover {
text-decoration:none;
color:#2fc8ff;
}
#mainMenu.ddsmoothmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}
/*Top level list items*/
#mainMenu.ddsmoothmenu ul li {
position: relative;
display: inline;
float: left;
}
/*Top level menu link items style*/
* html #mainMenu.ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to
behave correctly*/ display:
inline-block;
}
/*1st sub level menu*/
#mainMenu.ddsmoothmenu ul li ul{
position: absolute; l
eft: 0;
display: none; /*collapse all sub menus to begin with*/ visibility: hidden;
width:auto;
padding-bottom:7px;
background:
url(images/secondarydropdown.png)
repeat-y; box-shadow: 3px 6px 7px 1px
rgba(0, 0, 0, 0.5);
-moz-box-shadow:3px 6px 7px 1px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 3px 6px 7px 1px rgba(0, 0, 0, 0.5);
border-radius:8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-top-left-radius: 0px;
-moz-border-radius-topleft: 0px;
-webkit-border-top-left-radius: 0px;
border-top-right-radius: 0px;
-moz-border-radius-topright: 0px;
-webkit-border-top-right-radius: 0px;
border: 1px solid #232323;
border-top:none; /*border-bottom:1px solid #222;*/
}
/*Sub level menu list items (undo
style from Top level List Items)*/
#mainMenu.ddsmoothmenu ul li ul li{
float: none;
display: list-item;
padding:0;
height:3%;
}
/* Sub level menu links style */
#mainMenu.ddsmoothmenu ul li ul li a, #mainMenu.ddsmoothmenu ul li ul li a:hover{
text-align:left;
/*background:#000;*/
line-height:20%;
font-size:13px;
padding: 22px 5px 15px 28px;
color: #ffffff;
font-family:
Century Gothic, Arial, sans-serif;
text-shadow: 1px 1px 1px rgba(0, 0, 0,0.3);
background: url(images/secondary-dropdown-bullet.png)
no-repeat 15px 20px; z-index:9999;
}
#mainMenu.ddsmoothmenu ul li ul li a:hover {
color:#1FA2E1;
}
#mainMenu.ddsmoothmenu ul li ul li a.last, #mainMenu.ddsmoothmenu ul li
ul li a.last:hover {
border:none;
}
/* Holly Hack for IE \*/
* html #mainMenu.ddsmoothmenu{
height: 1%;
} /*Holly Hack for IE7 and below*/

Answer 1

Here's the answer for IE 7
paste this in your stylesheet
/* IE 7 Fix */
#header{z-index:1001 !important;}
#content{z-index:100 !important;}