Неправильное поведение выпадающего меню в ie7-8

can3p · February 26, 2010

Проблема следующая: сверстал выпадающее меню только при помощи css, но в ie8 вылезли проблемы как в режиме стандартов, так и в режиме совместимости.

Общая проблема для обоих режимов в том, что hover срабатывает необычным образом - при наведении на пункт меню, из которого должны выпадать подпункты, подменю появляется, но при этом при уводе мыши с сылки на этот пункт меню, для него событие hover отключается. Подменю при этом видно, но при возврате выши и наведении на пункт, подменю исчезает.

Вторая проблема заключается в том, что ни в одном из режимов эксплорер не хочет делать ширину пунктов подменю одинаковой, как это происходит в других браузерах. Пробовал включать hasLayout или ставить width: 100%, не помогает.

Буду признателен, если кто-то объяснит столь странное поведение браузеров, код прилагаю. У самого мозг вскипел (

Вживую код можно посмотреть здесь: http://test.dpetroff.ru/cssmenu/index.html

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>dropdown menu</title>
    <style>
* { 
padding : 0px;
margin: 0px;
}

a:link { text-decoration: none; color : #000000; border: 0px; -moz-outline-style: none;}
a:active { text-decoration: underline; color : #000000; border: 0px; -moz-outline-style: none;}
a:visited { text-decoration: none; color : #000000; border: 0px; -moz-outline-style: none;}
a:hover	{ text-decoration: underline; color : #000; border: 0px; -moz-outline-style: none;} 
a:focus { outline: none;-moz-outline-style: none;}

.menu { padding: 25px 0px 20px 0px; float: left; width: 100%; }
.menu .pages { float: none;}

.menu .pages ul { 
    display: block; 
    border-left: solid 2px #ccc; 
}
.menu .pages>ul>li 
{ 
    display: inline; 
    font: bold 14px/14px "Arial"; 
    letter-spacing: -1px; 
    float: left; 
    border-right: solid 2px #ccc; 
    height: 23px; 
    position: relative; 
}

.menu .pages li ul { 
    position: absolute; 
    top: 23px;
    left: -2px;
    z-index: 1000;
    list-style-type: none;
}

.menu .pages li ul li 
{ 
    display: none; 
/*    display: block ; */
    font-weight: normal; 
    letter-spacing: normal; 
    width: 100%;
    $margin-bottom: -3px\9;
/*    width: expression(alert(this.parentNode.width));*/
}

.menu .pages li>a 
{ 
    background: #fff; 
    color:#000; 
    float: left; 
    padding: 4px 8px 10px 8px;
    z-index: 500;
}

.menu .pages li ul li>a 
{ 
    display: block; 
    width: 100%; 
    border-right: solid 2px #ccc;
    white-space: nowrap;
}


.menu .pages li:hover li 
{
    display: block;
}




/*
* html .menu { height: 1%; float: left;}
.menu .pages ul { display: block; border-left: solid 2px #ccc; float: bottom; z-index: 1000; position: relative;}
.menu .pages li { display: inline; font: bold 14px/14px "Arial"; letter-spacing: -1px; float: left; border-right: solid 2px #ccc; height: 23px; position: relative;}
.menu .pages li ul li { display: none; border-left: solid 2px #ccc; font-weight: normal; letter-spacing: normal;}
.menu .pages li:hover ul { position: absolute; z-index: 2000; border: none; top: 23px; }
.menu .pages li:hover ul li { position: relative; padding: 0px; display: block; font-weight: normal; letter-spacing: normal; clear: both; float:none; left: -2px; z-index: 2010; width: 100%; white-space: nowrap; overflow: hidden; background: #c2e092;}

.menu .pages li:hover ul {
 left: 0px\9;
}

.menu .pages li:hover ul li {
 width: auto\9;
 min-width: 150px\9;
 margin-bottom: -3px\9;

}



.menu .pages li a { background: #fff; color:#000; float: left; padding: 4px 8px 10px 8px;}
.menu .pages li:hover a { background: #c2e092 url(images/pages-bot.png) no-repeat bottom center; color:#000;}

.menu .pages .current_page_parent a, .menu .pages .current_page_item a { background: #000 url(images/pages-bot.png) no-repeat bottom center; color:#fff; }

.menu .pages .current_page_item .page_item a, .menu .pages .current_page_parent a:hover, .menu .pages .current_page_parent .current_page_item a { 
background: #c2e092; color:#000;
background-image: none;
}
*/

    </style>
</head>
<body>

<div class="menu">
<div class="pages">
    <ul>
        <li><a href="#1">Первый пункт</a></li>
        <li>
            <a href="#2">Второй пункт</a>
            <ul>
                <li><a href="#2.1">Первый подпункт</a></li>
                <li><a href="#2.2">Второй подпункт</a></li>
                <li><a href="#2.3">Третий подпункт подлиннее</a></li>
            </ul>
        </li>
        <li><a href="#3">Третий пункт</a></li>
        <li><a href="#4">Четвертый пункт</a></li>
</div>
</div>

</body>
</html>

Sign In

Неправильное поведение выпадающего меню в ie7-8

Question

can3p

Link to comment

Share on other sites

0 answers to this question

Recommended Posts

Join the conversation

Обсуждения

Forums

Important Information