Проблема с горизонтальным меню и IE7 - PullRequest
Новая
       8

Проблема с горизонтальным меню и IE7

0 голосов
/ 30 июня 2010

Я сделал горизонтальное меню с некоторыми пунктами подменю.К сожалению, элементы третьего уровня подменю не отображаются в IE7.Весь HTML, CSS-код и рабочее меню вы можете увидеть на http://jsfiddle.net/XzCMr/

Как я выяснил, IE7 скрывает третий уровень на втором уровне.

Если я изменю маржу CSS с 

#main-nav li ul ul {
    width:202px;
    margin: -29px 0 0 218px;
}

К 

#main-nav li ul ul {
    width:202px;
    margin: -29px 0 0 100px;
}

Я вижу третий уровень, вложенный во второй уровень.http://jsfiddle.net/XzCMr/1/

HTML-код всего меню: 

<ul id="main-nav">
    <li class="first-level">
        <a href="#" class="mainlevel_main_menu" id="active_menu_main_menu">Item1</a>
    </li>
    <li class="first-level">
        <a href="#" class="mainlevel_main_menu" >Item2</a>
        <ul>    
            <li>
                <a href="#" class="sublevel_main_menu" >Test</a>
                <ul>
                    <li>
                        <a href="#" class="sublevel_main_menu" >Test</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#" class="sublevel_main_menu" >Test</a>
            </li>
            <li>
                <a href="#" class="sublevel_main_menu" >Test</a>
                <ul>
                    <li>
                        <a href="#" class="sublevel_main_menu" >Test</a>
                    </li>
                    <li>
                        <a href="#" class="sublevel_main_menu" >Test</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#" class="sublevel_main_menu" >Test</a>
            </li>
            <li>
                <a href="#" class="sublevel_main_menu" >Test</a>
            </li>
        </ul>
    </li>
    <li class="first-level">
        <a href="#" class="mainlevel_main_menu" >Item3</a>
    </li>
</ul>

Код CSS: 

/*first level*/

#main-nav,
#main-nav ul,
#main-nav ul ul,
#main-nav ul ul ul,
#main-nav ul ul ul ul{
    padding: 0;
    margin: 0;
    list-style: none;
}

#main-nav a {
    display: block;
}

#main-nav li {
    float: left;
}

#main-nav li a {
    display: block;
    padding-left: 15px;
    padding-right: 15px;
    text-decoration: none;
    color: #484848;
    background: transparent;
    font-weight: normal;
    font-family:Arial, Helvetica, sans-serif;
    font-size:20px;
    background:url(../images/circle_small.png);
    background-repeat:no-repeat;
    background-position:0px 8px;
}

#main-nav li a.mainlevel_main_menu#active_menu_main_menu,
#main-nav li a.mainlevel_main_menu:hover{
    color:#e5ae38;
}


/*second level*/

#main-nav li ul {
    position: absolute;
    left: -999em;
    width:218px;
    padding-top:10px;
    padding-bottom:10px;
    /*border: 1px solid #F00;*/
}

#main-nav li ul li a{
    width:218px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:13px;
    font-weight:normal;
    background:none;
    padding-left:15px;
    color: #3f3f3f;
    line-height:19px;
}

#main-nav li ul li a:hover{
    font-weight:bold;
}

#main-nav a.sublevel_main_menu.sub-pointer{
    background:url(../images/rightpointer.gif);
    background-repeat:no-repeat;
    background-position:200px 3px;

    /*border: 1px solid #F00;*/
}


/*third level*/

#main-nav li ul ul {
    width:202px;
    margin: -29px 0 0 100px;
}

/*fourth level*/
#main-nav li ul ul ul{
    padding-top:10px;
    padding-bottom:10px;
}



#main-nav li:hover ul ul,
#main-nav li:hover ul ul ul,
#main-nav li:hover ul ul ul ul{
    left: -999em;
}

#main-nav li:hover ul,
#main-nav li li:hover ul,
#main-nav li li li:hover ul,
#main-nav li li li li:hover ul{
    width:218px;
    left: auto;    
    background:url(../images/submenubg.png);
    background-repeat:no-repeat;
    background-position:0 4px;
    background-color: #f7f7f7;
    filter:alpha(opacity=90); /* IE's opacity*/
    opacity: 0.90;
}

Что с этим не так?Ваша помощь будет оценена.

1 Ответ

0 голосов
/ 15 июля 2010

Спасибо за ваши ответы. Я наконец нашел проблему. Вот оно: 

filter:alpha(opacity=90); /* IE's opacity*/

Так прозрачность испортила меню в IE7. Вы можете попробовать сами:

http://jsfiddle.net/XzCMr/7/

...