В IE не выпадает второй уровень меню

[tree85]

Добрый день!

Такая проблема: есть двухуровневое меню, при наведении выпадает второй уровень меню, в Ie не выполняется данное действие , во всех остальных браузерах все отлично работает!?

Помогите пожалуйста!!! Заранее всем благодарен!!

Посмотреть можно здесь

[tree85]

Всем спасибо за помощь, разобрался сам! Если кому интересно, проблема была в позиционировании и z-index

<div class="centerWrapper">
                <!-- main menu -->
                <ul id="mainMenu" class="hor noUnd">
                    <li class="mainMenuLi-1">
                        <a href="#">Лого </a>
                        <div class="secondMenuWrapper">
                            <ul class="secondMenu hor">
                                <li><a href="#">Дизайн логотипов</a></li>
                                <li><a href="#">Дизайн </a></li>
                                <li><a href="#">Дизайн</a></li>
                            </ul>
                        </div>
                    </li>
                    <li class="mainMenuLi-2">
                        <a href="#">Дизайн</a>
                        <div class="secondMenuWrapper">
                            <ul class="secondMenu hor">
                                <li><a href="#">Дизайн логотипов</a></li>
                                <li><a href="#">Дизайн</a></li>
                                <li><a href="#">Дизайн</a></li>
                            </ul>
                        </div>
                    </li>
                    . 
                    .
                    .
                    <li class="mainMenuLi-6">
                        <a href="#">Интерьеры</a>
                        <div class="secondMenuWrapper">
                            <ul class="secondMenu hor">
                                <li><a href="#">Дизайн</a></li>
                                <li><a href="#">Дизайн</a></li>
                                <li><a href="#">Дизайн</a></li>
                            </ul>
                        </div>
                    </li>
                </ul
</div>

#mainMenu li[class|="mainMenuLi"] {   
	margin-left:-1px;
}

#mainMenu li.mainMenuLi-1 {margin-left: 0px;}
#mainMenu {
	margin: 0 31px 0 148px;
	cursor: default;
	background-color: #f2f2f2;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f2f2f2), to(#767574));
    background-image: -moz-linear-gradient(#f2f2f2, #767574);
    background-image: -o-linear-gradient(#f2f2f2, #767574);
    background-image: linear-gradient(#f2f2f2, #767574);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f2f2f2', EndColorStr='#767574');
    position: relative;                                         /*первая позиция*/

}

#mainMenu li[class|="mainMenuLi"] {
	margin-left: -1px;
}

#mainMenu li.mainMenuLi-1 {margin-left: 0px;}

#mainMenu li[class|="mainMenuLi"] > a {
	display: block;
	width: 164px;
   	height: 36px;
	background: url(css/images/mainMenu.png) no-repeat 0 0;
	text-align: center;
	text-transform: uppercase;
	font-family: PragmaticaCondCTT;
	font-size: 90%;
	line-height: 2.8em;
	color: #58595b;

}

#mainMenu li.mainMenuLi-1 > a {background-position: 0 0;}
#mainMenu li.mainMenuLi-2 > a {background-position: -164px 0;}
#mainMenu li.mainMenuLi-3 > a {background-position: -328px 0;}
#mainMenu li.mainMenuLi-4 > a {background-position: -492px 0;}
#mainMenu li.mainMenuLi-5 > a {background-position: -656px 0;}
#mainMenu li.mainMenuLi-6 > a {background-position: -820px 0;}

#mainMenu li[class|="mainMenuLi"] > a:hover,
#mainMenu li[class|="mainMenuLi"]:hover > a {
	color: #ffffff;

}

#mainMenu li.mainMenuLi-1 > a:hover, #mainMenu li.mainMenuLi-1:hover > a {background-position: 0 -36px;}
#mainMenu li.mainMenuLi-2 > a:hover, #mainMenu li.mainMenuLi-2:hover > a {background-position: -164px -36px;}
#mainMenu li.mainMenuLi-3 > a:hover, #mainMenu li.mainMenuLi-3:hover > a {background-position: -328px -36px;}
#mainMenu li.mainMenuLi-4 > a:hover, #mainMenu li.mainMenuLi-4:hover > a {background-position: -492px -36px;}
#mainMenu li.mainMenuLi-5 > a:hover, #mainMenu li.mainMenuLi-5:hover > a {background-position: -656px -36px;}
#mainMenu li.mainMenuLi-6 > a:hover, #mainMenu li.mainMenuLi-6:hover > a {background-position: -820px -36px;}

#mainMenu li[class|="mainMenuLi"] div.secondMenuWrapper {
	display: none;
	position: absolute;
	top: 36px;
	left: 0px;
	width: 955px;
	padding: 0 22px;
	background-color: #4c4847;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4c4847), to(#332e2c));
    background-image: -moz-linear-gradient(#4c4847, #332e2c);
    background-image: -o-linear-gradient(#4c4847, #332e2c);
    background-image: linear-gradient(#4c4847, #332e2c);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#4c4847', EndColorStr='#332e2c');
    z-index: 10;
}


#mainMenu li.mainMenuLi-1 div.secondMenuWrapper {border-top: 4px solid #da251d;}
#mainMenu li.mainMenuLi-2 div.secondMenuWrapper {border-top: 4px solid #e98e28;}
#mainMenu li.mainMenuLi-3 div.secondMenuWrapper {border-top: 4px solid #f8df11;}
#mainMenu li.mainMenuLi-4 div.secondMenuWrapper {border-top: 4px solid #97cc2b;}
#mainMenu li.mainMenuLi-5 div.secondMenuWrapper {border-top: 4px solid #0084ca;}
#mainMenu li.mainMenuLi-6 div.secondMenuWrapper {border-top: 4px solid #842378;}

#mainMenu li[class|="mainMenuLi"] > a:hover + div.secondMenuWrapper,
#mainMenu li[class|="mainMenuLi"] > div.secondMenuWrapper:hover {
	display: block!important;

}

#mainMenu li[class|="mainMenuLi"] ul.secondMenu {
  position: relative;



}

#mainMenu li.mainMenuLi-1 ul.secondMenu {padding-left: 0; }
#mainMenu li.mainMenuLi-2 ul.secondMenu 
#mainMenu li.mainMenuLi-3 ul.secondMenu {padding-left: 200px;}
#mainMenu li.mainMenuLi-4 ul.secondMenu {padding-left: 300px;}
#mainMenu li.mainMenuLi-5 ul.secondMenu {padding-left: 150px;}
#mainMenu li.mainMenuLi-6 ul.secondMenu {padding-left: 500px;}

#mainMenu li[class|="mainMenuLi"] ul.secondMenu li a {
	text-align: center;
	text-transform: uppercase;
	font-family: PragmaticaCondCTT;
	height: 28px;
	padding: 0 12px;
	color: #ffffff;
	display: block;
	line-height: 1.9em;
    position: relative;

} 

Edited July 10, 2012 by tree85