Не работает выпадающее меню на CSS в IE

@raketa88 · Регистрация: 12.03.2013

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

Помогите исправить ситуацию..
Не работает выпадающее меню на CSS в IE, при наведении мышки ничего не выпадает, в остальных браузерах всё нормально.

HTML5
1
2
3
4
5
6
7
8
9
<ul class="main_top_menu">
    <li><a href="#">Главное меню</a></li>
    <li><a href="#">Витрина</a>
        <ul>
            <li><a href="#">Каталог</a></li>
            <li><a href="#">Товары</a></li>
        </ul>
        </li>
</ul>

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
ul.main_top_menu {
    margin: 0;
    padding: 0;
    display: inline-block;
    background-color: #2b2b2b;
    background-repeat: no-repeat;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4f4f4f), to(#2b2b2b));
    background-image: -webkit-linear-gradient(#4f4f4f, #2b2b2b);
    background-image: -moz-linear-gradient(top, #4f4f4f, #2b2b2b);
    background-image: -ms-linear-gradient(#4f4f4f, #2b2b2b);
    background-image: -o-linear-gradient(#4f4f4f, #2b2b2b);
    background-image: linear-gradient(#4f4f4f, #2b2b2b);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f', endColorstr='#2b2b2b', GradientType=0); 
 
    width: 750px;
}
ul.main_top_menu li {
    height:28px;
    float: left;
    list-style: none;
    border-right: 1px solid #4f4f4f;
    position: relative;
}
 
ul.main_top_menu li a {
    color: white;
    display: block;
    font-family: Arial;
    font-size: 13px;
    padding: 8px 20px 10px;
    text-decoration: none;
    border-right: 1px solid #2b2b2b;
}
 
ul.main_top_menu li a:hover {
    background-color: #2b2b2b;
}
 
ul.main_top_menu li:first-child a:hover {
    border-radius: 4px 0 0 4px;
    -webkit-border-radius: 4px 0 0 4px;
    -moz-border-radius: 4px 0 0 4px;
}
/*Выпадающее меню*/
ul.main_top_menu li ul {
    display: none;
}
 
ul.main_top_menu li:hover ul {
    display: block;
    position: absolute;
    top: 34px;
    border-radius: 0 0 4px 4px;
    -webkit-border-radius: 0 0 4px 4px;
    -moz-border-radius: 0 0 4px 4px;
    background-color: #2b2b2b;
    z-index: 1000;
}
 
ul.main_top_menu li:hover ul li {
    float: none;
    width: 150px;
    border-right: none;
}
 
ul.main_top_menu li:hover ul li a {
    border-top: 1px solid #4f4f4f;
    border-right: none;
    padding: 6px 0px 7px;
}
 
ul.main_top_menu li:hover ul li a:hover {
    background-color: transparent;
    color: #c1deff;
}
 
ul.main_top_menu li:hover ul li:first-child a:hover {
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
}

@newJS · 12.03.2013, 08:31

Эти работают в ие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
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
<div class="menuAlign">
<div class="levels">
<ul>
<li class="hovL">Фрукты 1
<ol>
<li><a href="#w1">Понцирусы</a></li>
<li><a href="#w1">Цитремон</a></li>
<li><a href="#w1">Кабусу</a></li>
<li><a href="#w1">Эремоцитрус</a></li>
<li><a href="#w1">Муррайи</a></li>
<li><a href="#w1">Цейлонский оранжстер</a></li>
<li><a href="#w1">Тангор</a></li>
<li><a href="#w1">Клементин</a></li>
<li><a href="#w1">Ортаник</a></li>
</ol></li></ul>
<ul>
<li class="hovL">Фрукты 2
<ol>
<li><a href="#w1">Королевский мандарин</a></li>
<li><a href="#w1">Маркот</a></li>
<li><a href="#w1">Сацумы</a></li>
<li><a href="#w1">Йеменский цитрон</a></li>
<li><a href="#w1">Цитрон</a></li>
<li><a href="#w1">Корсиканский цитрон</a></li>
</ol></li></ul>
<ul>
<li class="hovL">Фрукты 3
<ol>
<li><a href="#w1">Кафрский лайм</a></li>
<li><a href="#w1">Этрог</a></li>
<li><a href="#w1">Персидский (таитянский) лайм</a></li>
<li><a href="#w1">Лиметта</a></li>
<li><a href="#w1">Мексиканский лайм</a></li>
<li><a href="#w1">Индийский лайм</a></li>
<li><a href="#w1">Австралийский пальчиковый лайм</a></li>
</ol></li></ul>
<ul>
<li class="hovR">Фрукты 4
<ol>
<li><a href="#w1">Лимандарины</a></li>
<li><a href="#w1">Рангпур</a></li>
<li><a href="#w1">Отахайт</a></li>
<li><a href="#w1">Цитронелла</a></li>
<li><a href="#w1">Помело</a></li>
<li><a href="#w1">Свити</a></li>
<li><a href="#w1">Новозеландский грейпфрут</a></li>
<li><a href="#w1">Чиронья</a></li>
<li><a href="#w1">Каламондин</a></li>
<li><a href="#w1">Юзу</a></li>
</ol></li></ul>
<ul>
<li class="hovR">Фрукты 5
<ol>
<li><a href="#w1">Лаймкват</a></li>
<li><a href="#w1">Мандаринкват Индио</a></li>
<li><a href="#w1">Севийано</a></li>
<li><a href="#w1">Цитранжкват</a></li>
<li><a href="#w1">Горький апельсин кикудайдай</a></li>
<li><a href="#w1">Бергамот</a></li>
<li><a href="#w1">Нацудайдай</a></li>
<li><a href="#w1">Сангвинелли</a></li>
<li><a href="#w1">Углифрут</a></li>
</ol></li></ul>
 
</div></div>
 
<div style="text-align:justify;">UL это главный пункт меню, OL это выпадающее суб меню. LI для UL отличаются классом, класс отвечает в какую сторону будет выпадать суб меню.</div>
 
<a name="w1"></a>

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
body {background:whitesmoke;}
 
.menuAlign {text-align:center;}
.levels {display:inline-block; //display:inline; zoom:1; vertical-align:top;}
.levels a {display:block; text-decoration:none;}
 
.levels li {list-style-type:none; white-space:nowrap;}
.levels ul, .levels ol {margin:0; padding:0; text-align:left;}
.levels ul {float:left; position:relative; margin:0 2px;}
.levels ul li ol {display:none; background:lavender; border:1px solid gray;}
.levels ul li ol {margin:2px 0 0 0;}/* два бордюра от ul > li*/
.levels ul li ol {border-radius:7px;}
.levels ul>li {color:blue; cursor:default;}
.levels ul>li {padding:0 5px; background:lavenderblush; border:1px solid gray;}
.levels ul>li {font-size:19px; border-radius:7px;}
.levels ul>li {height:24px;}/*один размер top:*/
.levels ul>li:hover {background:lime;}
.levels ul>li:hover>ol {top:24px;}/*один размер height:*/
.levels .hovL:hover>ol {display:block; position:absolute; left:0;}
.levels .hovR:hover>ol {display:block; position:absolute; right:0;}
.levels ol li {margin:2px 5px; border-radius:7px;}
.levels ol li:hover {background:blue;}
.levels ol li a:hover {color:white;}
.levels ol li a {padding:2px 5px; color:navy;}

Кликните здесь для просмотра всего текста

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
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
<div class="menuAlign">
<div class="levels">
<dl>
<dt>Фрукты 1</dt>
<dd><dl class="hovL1">
<dd><a href="#w1">Понцирусы</a></dd>
<dd><a href="#w1">Цитремон</a></dd>
<dd><a href="#w1">Кабусу</a></dd>
<dd><a href="#w1">Эремоцитрус</a></dd>
<dd><a href="#w1">Муррайи</a></dd>
<dd><a href="#w1">Цейлонский оранжстер</a></dd>
<dd><a href="#w1">Тангор</a></dd>
<dd><a href="#w1">Клементин</a></dd>
<dd><a href="#w1">Ортаник</a></dd>
</dl></dd></dl>
<dl>
<dt>Фрукты 2</dt>
<dd><dl class="hovL1">
<dd><a href="#w1">Королевский мандарин</a></dd>
<dd><a href="#w1">Маркот</a></dd>
<dd><a href="#w1">Сацумы</a></dd>
<dd><a href="#w1">Йеменский цитрон</a></dd>
<dd><a href="#w1">Цитрон</a></dd>
<dd><a href="#w1">Корсиканский цитрон</a></dd>
</dl></dd></dl>
<dl>
<dt>Фрукты 3</dt>
<dd><dl class="hovR1">
<dd><a href="#w1">Кафрский лайм</a></dd>
<dd><a href="#w1">Этрог</a></dd>
<dd><a href="#w1">Персидский (таитянский) лайм</a></dd>
<dd><a href="#w1">Лиметта</a></dd>
<dd><a href="#w1">Мексиканский лайм</a></dd>
<dd><a href="#w1">Индийский лайм</a></dd>
<dd><a href="#w1">Австралийский пальчиковый лайм</a></dd>
</dl></dd></dl>
<dl>
<dt>Фрукты 4</dt>
<dd><dl class="hovL1">
<dd><a href="#w1">Лимандарины</a></dd>
<dd><a href="#w1">Рангпур</a></dd>
<dd><a href="#w1">Отахайт</a></dd>
<dd><a href="#w1">Цитронелла</a></dd>
<dd><a href="#w1">Помело</a></dd>
<dd><a href="#w1">Свити</a></dd>
<dd><a href="#w1">Новозеландский грейпфрут</a></dd>
<dd><a href="#w1">Чиронья</a></dd>
<dd><a href="#w1">Каламондин</a></dd>
<dd><a href="#w1">Юзу</a></dd>
</dl></dd></dl>
<dl>
<dt>Фрукты 5</dt>
<dd><dl class="hovR1">
<dd><a href="#w1">Лаймкват</a></dd>
<dd><a href="#w1">Мандаринкват Индио</a></dd>
<dd><a href="#w1">Севийано</a></dd>
<dd><a href="#w1">Цитранжкват</a></dd>
<dd><a href="#w1">Горький апельсин кикудайдай</a></dd>
<dd><a href="#w1">Бергамот</a></dd>
<dd><a href="#w1">Нацудайдай</a></dd>
<dd><a href="#w1">Сангвинелли</a></dd>
<dd><a href="#w1">Углифрут</a></dd>
</dl></dd></dl>
 
</div></div>
 
<div style="text-align:justify;">DT это главный пункт меню, DL это выпадающее суб меню. DL отличаются классом, класс отвечает в какую сторону будет выпадать суб меню.</div>
 
<a name="w1"></a>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
body {background:window;}
 
.menuAlign {text-align:center;}
.levels {display:inline-block; //display:inline; zoom:1; vertical-align:top;}
.levels a {display:block; text-decoration:none;}
 
.levels dl, .levels dt, .levels dd {margin:0; padding:0; white-space:nowrap; text-align:left;}
.levels dl {margin:0 3px;}
.levels>dl {float:left; position:relative;}
.levels dt {background:lavenderblush;}
.levels dt {cursor:pointer; color:blue;}
.levels dt, .levels dd>dl>dd {padding:1px 7px 3px 7px;}
.levels dt, .levels dd dl {border-radius:9px 0 9px 0; border:2px solid maroon;}
 
.levels dd dl {display:none; background:lavender;}
.levels dl:hover dd dl.hovL1 {display:block; position:absolute; left:-2px;}
.levels dl:hover dd dl.hovR1 {display:block; position:absolute; right:-2px;}
.levels dd dl dd {margin:2px 5px; border-radius:7px;}
.levels dd dl dd:hover {background:blue;}
.levels dd dl dd:hover a {color:white;}
.levels>dl>dt {cursor:default;}

Новые блоги и статьи Все статьи Все блоги /
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(), которая. . .