how to fix overlaps in ie 7?

yesterday i just developed magento website but i have problem with how to fix banner overlaps because th开发者_运维技巧is DIV just overlaps the menu...i try to seperate and use ie7 stylesheet but nothing happen.. :(

http://thaiamuletstore.com/main1/index.php/

try to hover menu --> STORE-> Amulet Types->Great Jatukham

ie7.css


@charset "utf-8";
/* CSS Document */


#example-one .nav { overflow: hidden; margin: 0 0 0 0; background:url(../images/tab-border.gif) repeat-x 80px; height:87px; }

.block-subscribe { padding-left: 15px!important; padding-right:15px; margin-top:20px;}



.nav-container { float:left; }

.mw_footer { clear:both!important; }

.account-login .col2-set .registered-users { width:435px; }

.account-login .col2-set .new-users { width:430px; }

.account-create .buttons-set { width:550px; }

.block-subscribe { padding-left:5px!important ; height:127px; padding-bottom:0px!important }

.block-content .newsbut { height:21px!important; }

ul li ul li ul li a.level1 {  zoom:1; }        <-- i try control with this

---

There are a couple of options.

The easiest, if possible, is to place your menu at the bottom of the page and then move it up via absolute positioning. This is because IE sucks at z-index and the easiest way to trick it is to have the html code generate as the last item (placing it on top of all other html).

This will however not work with Flash, silverlight or java-applets which will still sneak on top.

Alternatively you can (however i like the first option more) place an IFRAME under your menu filling out the area you want it to cover. This "fixes" most of IE's whacky ideas about positional elements. But like i said, if you can move your menu to the bottom of the html page, then that is your best bet.