Выпадающее меню

@tsohg15 · Регистрация: 14.03.2012

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

Всем привет, у меня маленькая проблема такая. Есть выпадающее меню и под ним блок, но когда я навожу на пункт меню выпадающая часть вылазит не поверх нижнего блока а под ним.
Подскажите в чём моя ошибка?

@Sunman · 20.07.2012, 20:53

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

Подскажите в чём моя ошибка?

код покажи для начала.
Можно попробовать дать элементам меню свойства

CSS
1
2
position:absolute;
z-index:20;

@newJS · 20.07.2012, 20:57

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

Подскажите в чём моя ошибка?

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

@tsohg15 · 20.07.2012, 21:02 **[ТС]**

ага спс зет индекса небыло

Добавлено через 2 минуты

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
#nav ul {
    background-color: #222;
    border:1px solid #222;
    border-radius: 0 5px 5px 5px;
    border-width: 0 1px 1px;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
    left: -9999px;
    overflow: hidden;
    position: absolute;
}
 
#nav li {
   
    float: left;
    position: relative;
}
 
#nav li a {
    
    display: block;
    float: left;
    font-weight: normal;
    
   
    position: relative;
    text-decoration: none;
    text-shadow: 1px 1px 1px #000000;
}
 
 
 
#nav li:hover ul.subs {
    left: 0;
    top: 53px;
    width: 100px;
    z-index:20;
}
 
 
            
            
            
        .top-menu-block{
            background: url(../images/top-menu-fon1.png) 0 0 repeat-x;
            height: 46px;
            padding: 0 0 0 14px;
            line-height: 46px;
            margin:0px 0px 0px 0px;
            z-index:20;
        }
            
            .top-menu-link{
                display: block;
                float: left;
                margin: 9px 9px 0 0;
                background: url(../images/link-orange.png) 0 0 repeat-x;
                height: 28px;
                padding: 0 12px 0 14px;
                border-radius: 2px;
                web-kit-border-radius: 2px;
                moz-border-radius: 2px;
                font: bold 12px Arial;
                color: #fff;
                line-height: 28px;
                text-transform: uppercase;
            }
                
                .top-menu-link:hover{
                    background: url(../images/link-orange.png) 0 bottom repeat-x;

Добавлено через 49 секунд

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
<div class="top-menu-block">
            <ul id="nav">
                <li><a href="http://gameringame.ru/" class="top-menu-link">Главная</a></li>
                <li><a href="#" class="top-menu-link green">Игры</a>
                    <ul class="subs">
                        <li><a href="#">Подпункт 1</a></li>
                        <li><a href="#">Подпункт 2</a></li>
                        <li><a href="#">Подпункт 3</a></li>
                        <li><a href="#">Подпункт 4</a></li>
                        <li><a href="#">Подпункт 5</a></li>
                    </ul>
                </li>
                <li><a href="#" class="top-menu-link akva">Видео</a>
                    <ul class="subs">
                        <li><a href="#">Подпункт 2-1</a></li>
                        <li><a href="#">Подпункт 2-2</a></li>
                        <li><a href="#">Подпункт 2-3</a></li>
                        <li><a href="#">Подпункт 2-4</a></li>
                        <li><a href="#">Подпункт 2-5</a></li>
                        <li><a href="#">Подпункт 2-6</a></li>
                        <li><a href="#">Подпункт 2-7</a></li>
                        <li><a href="#">Подпункт 2-8</a></li>
                    </ul>
                </li>
                <li><a href="#" class="top-menu-link fiolet">Новости</a>
                    <ul class="subs">
                        <li><a href="#">Подпункт 3-1</a></li>
                        <li><a href="#">Подпункт 3-2</a></li>
                        <li><a href="#">Подпункт 3-3</a></li>
                        <li><a href="#">Подпункт 3-4</a></li>
                        <li><a href="#">Подпункт 3-5</a></li>
                    </ul>
                </li>
                <li><a href="#" class="top-menu-link oran">Обзоры</a></li>
                <li><a href="#" class="top-menu-link blue">Файлы</a></li>
                <li><a href="#" class="top-menu-link pink">Игровые обои</a></li>
                <li><a href="#" class="top-menu-link ser">Обратная связь</a></li>
                <div id="lavalamp"></div>
            </ul>
 
        </div>

Добавлено через 50 секунд
теперь когда я навожу на пункт меню все норм вылазит но нажать на под пункты не успеваю исчезают

@Sunman · 20.07.2012, 21:08

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

теперь когда я навожу на пункт меню все норм вылазит но нажать на под пункты не успеваю исчезают

Я тут выкладывал свое выпадающее меню которое доработал Выпадающее меню свдигает ниже лежащие блоки
Может подойдет. Код пока нет времени разбирать

Хотя по структуре мой CSS код как раз под "двух ярусное" меню как у тебя.

@tsohg15 · 20.07.2012, 21:16 **[ТС]**

ну у тебя меню вертикальное а у меня горизонтальное так что не подойдёт))
я кстати тоже первоначально брал то меню с руселлера и также переделывал получилось неплохо думаю

@tsohg15 · 23.07.2012, 06:19 **[ТС]**

ну кто нибудь ещё поможет дельным советом

@newJS · 24.07.2012, 20:42

Что то типа шаблона

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
<table class="menuCenter"><tr><td>
<div id="menuG">
<ul>
<li class="hoverA"><a href="#">Пункт 1</a>
<ol>
<li><a href="#">Элемент меню 11</a></li>
<li><a href="#">Элемент меню 22222</a></li>
<li><a href="#">Элемент меню</a></li>
</ol></li></ul>
<ul>
<li class="hoverA"><a href="#">Пункт 2</a>
<ol>
<li><a href="#">Выпадающее раз</a></li>
<li><a href="#">Выпадающее два</a></li>
<li><a href="#">Выпадающее три</a></li>
</ol></li></ul>
<ul>
<li class="hoverA"><a href="#">Пункт 3</a>
<ol>
<li><a href="#">Элемент</a></li>
<li><a href="#">Элемент меню</a></li>
<li><a href="#">меню</a></li>
</ol></li></ul>
<ul>
<li class="hoverL"><a href="#">Пункт 4</a>
<ol>
<li><a href="#">Выпадающее раз 1</a></li>
<li><a href="#">Выпадающее два 22</a></li>
<li><a href="#">Выпадающее три 333</a></li>
</ol></li></ul>
 
 
</div></td></tr></table>
text text text text text text text text text text text text text text text text

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
.menuCenter {margin:422px auto 0 auto; border:0; padding:0; border-collapse:collapse;}
#menuG a {display:block; text-decoration:none;}
 
#menuG li {list-style-type:none; white-space:nowrap;}
#menuG ul, #menuG ol {margin:0; padding:0;}
#menuG ul {float:left; position:relative; margin:0 2px;}
 
#menuG ul li ol {display:none; background:lavender; border:1px solid gray;}
#menuG ul li ol {margin:2px 0 0 0;}/* два бордюра от ul > li*/
#menuG ul li ol {border-radius:7px;}
 
#menuG ul > li > a {color:blue;}
#menuG ul > li {padding:0 5px; background:lavenderblush; border:1px solid gray;}
#menuG ul > li {font-size:19px; border-radius:7px;}
#menuG ul > li {height:24px;}/*один размер*/
#menuG ul > li:hover > ol {top:24px;}/*один размер*/
#menuG .hoverA:hover > ol {display:block; position:absolute; left:0;}
#menuG .hoverL:hover > ol {display:block; position:absolute; right:0;}
#menuG ul > li:hover {background:lime;}
 
#menuG ol li {margin:2px; border-radius:7px;}
#menuG ol li:hover {background:blue;}
#menuG ol li a:hover {color:white;}
#menuG ol li a {padding:2px 5px; color:navy;}

@Andreyyyyy · 26.07.2012, 14:56

необходимо у li задать min-height

Новые блоги и статьи Все статьи Все блоги /
Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .	SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .

@tsohg15 1 / 2 / 3 Регистрация: 14.03.2012 Сообщений: 84

	Выпадающее меню 20.07.2012, 19:48. Показов 3012. Ответов 8 Метки нет (Все метки) Всем привет, у меня маленькая проблема такая. Есть выпадающее меню и под ним блок, но когда я навожу на пункт меню выпадающая часть вылазит не поверх нижнего блока а под ним. Подскажите в чём моя ошибка? 0

@tsohg15 1 / 2 / 3 Регистрация: 14.03.2012 Сообщений: 84
	20.07.2012, 21:16 [ТС]
	ну у тебя меню вертикальное а у меня горизонтальное так что не подойдёт)) я кстати тоже первоначально брал то меню с руселлера и также переделывал получилось неплохо думаю 0

@tsohg15 1 / 2 / 3 Регистрация: 14.03.2012 Сообщений: 84
	23.07.2012, 06:19 [ТС]
	ну кто нибудь ещё поможет дельным советом 0

@Andreyyyyy 1 / 1 / 0 Регистрация: 26.07.2012 Сообщений: 6
	26.07.2012, 14:56
	необходимо у li задать min-height 1