Выпадающее меню проваливается под текст\картинки\видео в IE

@hunty · Регистрация: 20.11.2009

Студворк — интернет-сервис помощи студентам

Ситуация, горизонтальное вы падающее меню в интернет эксплорере 6-8 заезжает под текст.
Меню:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<div id="dolphinnav">
<ul id="nav">
<li id="current" class="active item1">
<a href="index">1</a></li>
<li class="parent item2"><a href="/about-dance-heads">2</a>
  <ul>
    <li class="item20"><a href="2">2.1</a></li>
    <li class="item21"><a href="3">2.2</a></li>
  </ul>
</li>
<li class="parent item3"><a href="4">3</a>
  <ul>
    <li class="item4"><a href="4">3.1</a></li>
    <li class="item10"><a href="5">3.2</a></li>
    <li class="item12"><a href="6">3.3</a></li>
    <li class="item13"><a href="7">3.4</a></li>
    <li class="item27"><a href="8">3.5</a></li>
  </ul>
</li>
<li class="parent item5"><a href="#">4</a>
  <ul>
    <li class="item22"><a href="/galeries/photo">4.1</a></li>
    <li class="item23"><a href="#">4.2</a></li>
  </ul>
</li>
<li class="item6"><a href="/prices">5</a></li>
<li class="item7"><a href="/news">6</a></li>
<li class="parent item9"><a href="/about">7</a>
    <ul>
      <li class="item25"><a href="/about/parthners">7.1</a></li>
      <li class="item24"><a href="/about/clients">7.2</a></li>
    </ul>
</li>
<li class="item8"><a href="/contacts">8</a></li></ul>
</div>

стиль меню

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
/* MENU */
#dolphincontainer{
}
#nav {
    float: left;
    margin: 0; padding: 0;
    border: 1px solid white;
    border-bottom: none;
    width: 100%;
    background: #006600;
    background: -moz-linear-gradient(top, black, #339900 1px, #006600 25px);
    background: -webkit-gradient(linear, left top, left 25, from(black), color-stop(7%, #339900), to(#006600)); 
    filter: progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr=#006600,endColorstr=#339900,GradientType=0); zoom: 1;
    z-index:999;
}
#nav li a, #nav li {
    float: left;
}
#nav li {
    list-style: none;
    position: relative;
}
/*for opera*/
@media all and (width) { 
    #nav
    {
        background:url(../images/btn.png) repeat-x;
    } 
    #nav li a
    {
        padding: 1em 0.75em;
        background:url(../images/btn.png) repeat-x;
    } 
    
    #nav li a:hover 
    { 
        background: #CCCC00 url(../images/btn_hvr.png)repeat-x;
    }   
}
#nav li a {
    padding: 13px 9px;
    text-decoration: none;
    color: white;
    background: -moz-linear-gradient(top, black, #339900 1px, #006600 25px);
    background: -webkit-gradient(linear, left top, left 25, from(#006600), color-stop(7%, #339900), to(#006600));
    filter: progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr=#006600,endColorstr=#339900,GradientType=0); zoom: 1;
    border-left: 1px solid #339900;
    border-right: 1px solid #006600;
    border-bottom: 1px solid #006600;
    border-top: 1px solid #339900;
}
@-moz-document url-prefix() {
    #nav li a {padding: 1em 0.75em;}
    }
#nav li a:hover {
    background: -webkit-gradient(linear, left top, left bottom, from(#006600), to(#CCCC00));
    background: -moz-linear-gradient(top, #006600, #CCCC00);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr=#006600,endColorstr=#CCCC00,GradientType=0); zoom: 1;
}
/* Submenu */
.hasChildren {
    position: absolute;
    width: 5px; height: 5px;
    background: black;
    right : 0;
    bottom: 0;
}
#nav li ul {
    position: absolute;
    left: 0;
    top: 100%;
    padding: 0; margin: 0;
    z-index:99;
}
#nav li:hover > ul {
    display: block;
    z-index:99;
    position: absolute;
}
#nav li ul li, #nav li ul li a {
    float: none;
    /* position: relative; */
}
#nav li ul li {
    _display: inline; /* for IE6 */
    *display: inline; /*for IE 7 */
    display:inline\9; /*for IE 9*/
}
#nav li ul li a {
    display: block;
    _width:auto;/* for IE6 */
    *width:auto;/* for IE7 */
    _width:auto\9;/* for IE8-9 */
}
 
 
 #nav li.parent ul {
    display: none;
}

Выводится не CSS но скриптом :

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
 jQuery.noConflict();
 jQuery(document).ready(function(){
     jQuery('#nav li.parent').hover(
            function(){
               menuCellWidth = jQuery(this).css("width");
               jQuery(this).children('ul').css("width",menuCellWidth," !important").show(300);
            },
            function(){ 
              jQuery(this).children('ul').hide();
            }
     );
 });

меню выводится ок, с эффектом, но в IE 6-8 выпадающая вкладка ныряет под текст, флеш, картинки и т.д. Ест идеи как поправить?

Добавлено через 42 минуты
Немного похимичил с position - выставил в statik - все ок. Но меню сворачивается (происходит MouseOut) при наведении сквозь !меню на какой либо текст (и в <p> и даже <table>) что странно.

@html-profi · 01.12.2011, 19:57

Сообщение от hunty

Ситуация, горизонтальное вы падающее меню в интернет эксплорере 6-8 заезжает под текст.
Меню:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<div id="dolphinnav">
<ul id="nav">
<li id="current" class="active item1">
<a href="index">1</a></li>
<li class="parent item2"><a href="/about-dance-heads">2</a>
  <ul>
    <li class="item20"><a href="2">2.1</a></li>
    <li class="item21"><a href="3">2.2</a></li>
  </ul>
</li>
<li class="parent item3"><a href="4">3</a>
  <ul>
    <li class="item4"><a href="4">3.1</a></li>
    <li class="item10"><a href="5">3.2</a></li>
    <li class="item12"><a href="6">3.3</a></li>
    <li class="item13"><a href="7">3.4</a></li>
    <li class="item27"><a href="8">3.5</a></li>
  </ul>
</li>
<li class="parent item5"><a href="#">4</a>
  <ul>
    <li class="item22"><a href="/galeries/photo">4.1</a></li>
    <li class="item23"><a href="#">4.2</a></li>
  </ul>
</li>
<li class="item6"><a href="/prices">5</a></li>
<li class="item7"><a href="/news">6</a></li>
<li class="parent item9"><a href="/about">7</a>
    <ul>
      <li class="item25"><a href="/about/parthners">7.1</a></li>
      <li class="item24"><a href="/about/clients">7.2</a></li>
    </ul>
</li>
<li class="item8"><a href="/contacts">8</a></li></ul>
</div>

стиль меню

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
/* MENU */
#dolphincontainer{
}
#nav {
    float: left;
    margin: 0; padding: 0;
    border: 1px solid white;
    border-bottom: none;
    width: 100%;
    background: #006600;
    background: -moz-linear-gradient(top, black, #339900 1px, #006600 25px);
    background: -webkit-gradient(linear, left top, left 25, from(black), color-stop(7%, #339900), to(#006600)); 
    filter: progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr=#006600,endColorstr=#339900,GradientType=0); zoom: 1;
    z-index:999;
}
#nav li a, #nav li {
    float: left;
}
#nav li {
    list-style: none;
    position: relative;
}
/*for opera*/
@media all and (width) { 
    #nav
    {
        background:url(../images/btn.png) repeat-x;
    } 
    #nav li a
    {
        padding: 1em 0.75em;
        background:url(../images/btn.png) repeat-x;
    } 
    
    #nav li a:hover 
    { 
        background: #CCCC00 url(../images/btn_hvr.png)repeat-x;
    }   
}
#nav li a {
    padding: 13px 9px;
    text-decoration: none;
    color: white;
    background: -moz-linear-gradient(top, black, #339900 1px, #006600 25px);
    background: -webkit-gradient(linear, left top, left 25, from(#006600), color-stop(7%, #339900), to(#006600));
    filter: progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr=#006600,endColorstr=#339900,GradientType=0); zoom: 1;
    border-left: 1px solid #339900;
    border-right: 1px solid #006600;
    border-bottom: 1px solid #006600;
    border-top: 1px solid #339900;
}
@-moz-document url-prefix() {
    #nav li a {padding: 1em 0.75em;}
    }
#nav li a:hover {
    background: -webkit-gradient(linear, left top, left bottom, from(#006600), to(#CCCC00));
    background: -moz-linear-gradient(top, #006600, #CCCC00);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr=#006600,endColorstr=#CCCC00,GradientType=0); zoom: 1;
}
/* Submenu */
.hasChildren {
    position: absolute;
    width: 5px; height: 5px;
    background: black;
    right : 0;
    bottom: 0;
}
#nav li ul {
    position: absolute;
    left: 0;
    top: 100%;
    padding: 0; margin: 0;
    z-index:99;
}
#nav li:hover > ul {
    display: block;
    z-index:99;
    position: absolute;
}
#nav li ul li, #nav li ul li a {
    float: none;
    /* position: relative; */
}
#nav li ul li {
    _display: inline; /* for IE6 */
    *display: inline; /*for IE 7 */
    display:inline\9; /*for IE 9*/
}
#nav li ul li a {
    display: block;
    _width:auto;/* for IE6 */
    *width:auto;/* for IE7 */
    _width:auto\9;/* for IE8-9 */
}
 
 
 #nav li.parent ul {
    display: none;
}

Выводится не CSS но скриптом :

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
 jQuery.noConflict();
 jQuery(document).ready(function(){
     jQuery('#nav li.parent').hover(
            function(){
               menuCellWidth = jQuery(this).css("width");
               jQuery(this).children('ul').css("width",menuCellWidth," !important").show(300);
            },
            function(){ 
              jQuery(this).children('ul').hide();
            }
     );
 });

меню выводится ок, с эффектом, но в IE 6-8 выпадающая вкладка ныряет под текст, флеш, картинки и т.д. Ест идеи как поправить?

Добавлено через 42 минуты
Немного похимичил с position - выставил в statik - все ок. Но меню сворачивается (происходит MouseOut) при наведении сквозь !меню на какой либо текст (и в <p> и даже <table>) что странно.

У тебя проблема с позиционированием элементов.
Чтобы устранить эту проблему надо для 3-х блоков прописать position: relative, z-index

Предположим такой html код

HTML5
1
2
3
4
5
6
<div class='header'>
   ...
   <div class='menu'>здесь структура меню какая-то</div>
   ...
</div>
<div class='main'></div>

И CSS

CSS
1
2
3
4
5
6
7
8
9
10
11
12
.header {
   position: relative;
   z-index: 2;
}
.menu {
   position: relative;
   z-index: 3;
}
.main {
  position: relative;
  z-index: 1;
}

@hunty · 01.12.2011, 20:14 **[ТС]**

Думал помогло, однако перепутал браузеры ). Проблема отсталась. Однако в левом сайдбаре ничего такого не происходит - выпадающее меню заезжая на него не сворачивается, но текста там нет, опять же ul-li и <a> элементы в таблице.

@html-profi · 01.12.2011, 21:07

Сообщение от hunty

Думал помогло, однако перепутал браузеры ). Проблема отсталась. Однако в левом сайдбаре ничего такого не происходит - выпадающее меню заезжая на него не сворачивается, но текста там нет, опять же ul-li и <a> элементы в таблице.

кинь на почту архив с файлами. p_bobylev@bk.ru

@hunty · 01.12.2011, 21:14 **[ТС]**

В рабочем виде доступно тут develop.dh-rzn.ru

02.12.2011, 17:04

Сообщение от html-profi

Чтобы устранить эту проблему надо для 3-х блоков прописать position: relative, z-index

Предположим такой html код

HTML5
1
2
3
4
5
6
<div class='header'>
   ...
   <div class='menu'>здесь структура меню какая-то</div>
   ...
</div>
<div class='main'></div>

И CSS

CSS
1
2
3
4
5
6
7
8
9
10
11
12
.header {
   position: relative;
   z-index: 2;
}
.menu {
   position: relative;
   z-index: 3;
}
.main {
  position: relative;
  z-index: 1;
}

Не обязательно position должен быть relative, можно использовать для любого значения position, кроме static. При этом достаточно прописать индекс 1 для меню, для остальных элементов его можно не указывать:

.menu {
position: absolute;
z-index: 1;
top:40px;
left:60px;
}

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@hunty 62 / 29 / 5 Регистрация: 20.11.2009 Сообщений: 193
	01.12.2011, 20:14 [ТС]
	Думал помогло, однако перепутал браузеры ). Проблема отсталась. Однако в левом сайдбаре ничего такого не происходит - выпадающее меню заезжая на него не сворачивается, но текста там нет, опять же ul-li и <a> элементы в таблице. 0

@hunty 62 / 29 / 5 Регистрация: 20.11.2009 Сообщений: 193
	01.12.2011, 21:14 [ТС]
	В рабочем виде доступно тут develop.dh-rzn.ru 0