can3p
-
Posts
2 -
Joined
-
Last visited
can3p's Achievements
Explorer (1/14)
0
Reputation
-
Проблема следующая: сверстал выпадающее меню только при помощи 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>
-
по спецификации отступ дочернего блока накладывается на отступ родительского, в результате дочерний блок отодвинется на высоту, равную максимальной из этих двух