Магия выпадающего меню

@a4t_ech · Регистрация: 10.08.2015

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

Создал горизонтальное меню, при наведении курсора мыши на его пункты выпадает вертикальное меню, все отлично...НО! под горизонтальными меню есть теги <div> и <input> и что странно и не понятно (лично для меня) вертикальное меню, которое накладывается на <input> работает, а которое накладывается на <div> нет....пробовал играть с z-index - без результатов. У кого была такая проблема, подскажите как решить или где искать?

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
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
100
101
102
103
104
105
106
<!DOCTYPE html>
<html>
    <head>
        <title>index_03</title>
        <meta charset = "utf-8">
        <link rel = "stylesheet" type = "text/css" href = "style.css">
    </head>
    <body>
        <div id = "body">
            <div id = "main">
                <div id = "header">
                    <div id = "header_top">
                        <span id = "ts_left">VIVI Theme Wordpress released via Themeforest! Check it out: <a href = "#">http://bit.ly/9E4M1w</a></span>
                        <ul id = "header_ul">
                            <li class = "head_li"><a href = "#">Home |</a></li>
                            <li class = "head_li"><a href = "#">Sitemap |</a></li>
                            <li class = "head_li"><a href = "#">Client Login</a></li>
                        </ul>
                    </div>
                    <div id = "header_bottom">
                        <div id = "about" class = "hb_menu">
                            <span class = "hb_menu_span">About</span>
                            <ul class = "hb_menu_ul">
                                <li class = "hb_menu_li"><a href = "#" class = "hb_menu_a">Element</a></li>
                                <li class = "hb_menu_li"><a href = "#" class = "hb_menu_a">Element</a></li>
                                <li class = "hb_menu_li"><a href = "#" class = "hb_menu_a">Element</a></li>
                                <li class = "hb_menu_li"><a href = "#" class = "hb_menu_a">Element</a></li>
                                <li class = "hb_menu_li"><a href = "#" class = "hb_menu_a">Element</a></li>
                            </ul>
                        </div>  
                        <div class = "hb_menu">
                            <span class = "hb_menu_span">Services</span>
                            <ul class = "hb_menu_ul">
                                <li class = "hb_menu_li"><a href = "#" class = "hb_menu_a">Element</a></li>
                                <li class = "hb_menu_li"><a href = "#" class = "hb_menu_a">Element</a></li>
                                <li class = "hb_menu_li"><a href = "#" class = "hb_menu_a">Element</a></li>
                                <li class = "hb_menu_li"><a href = "#" class = "hb_menu_a">Element</a></li>
                                <li class = "hb_menu_li"><a href = "#" class = "hb_menu_a">Element</a></li>
                            </ul>
                        </div>
                        <div class = "hb_menu">
                            <span class = "hb_menu_span">Work</span>
                            <ul class = "hb_menu_ul">
                                <li class = "hb_menu_li"><a href = "#" class = "hb_menu_a">Element</a></li>
                                <li class = "hb_menu_li"><a href = "#" class = "hb_menu_a">Element</a></li>
                                <li class = "hb_menu_li"><a href = "#" class = "hb_menu_a">Element</a></li>
                                <li class = "hb_menu_li"><a href = "#" class = "hb_menu_a">Element</a></li>
                                <li class = "hb_menu_li"><a href = "#" class = "hb_menu_a">Element</a></li>
                            </ul>
                        </div>
                        <div class = "hb_menu">
                            <span class = "hb_menu_span">Faq</span>
                            <ul class = "hb_menu_ul">
                                <li class = "hb_menu_li"><a href = "#" class = "hb_menu_a">Element</a></li>
                                <li class = "hb_menu_li"><a href = "#" class = "hb_menu_a">Element</a></li>
                                <li class = "hb_menu_li"><a href = "#" class = "hb_menu_a">Element</a></li>
                                <li class = "hb_menu_li"><a href = "#" class = "hb_menu_a">Element</a></li>
                                <li class = "hb_menu_li"><a href = "#" class = "hb_menu_a">Element</a></li>
                            </ul>
                        </div>
                        <div class = "hb_menu">
                            <span class = "hb_menu_span">Blog</span>
                            <ul class = "hb_menu_ul">
                                <li class = "hb_menu_li"><a href = "#" class = "hb_menu_a">Element</a></li>
                                <li class = "hb_menu_li"><a href = "#" class = "hb_menu_a">Element</a></li>
                                <li class = "hb_menu_li"><a href = "#" class = "hb_menu_a">Element</a></li>
                                <li class = "hb_menu_li"><a href = "#" class = "hb_menu_a">Element</a></li>
                                <li class = "hb_menu_li"><a href = "#" class = "hb_menu_a">Element</a></li>
                            </ul>
                        </div>
                        <div class = "hb_menu">
                            <span class = "hb_menu_span">Client</span>
                            <ul class = "hb_menu_ul">
                                <li class = "hb_menu_li"><a href = "#" class = "hb_menu_a">Element</a></li>
                                <li class = "hb_menu_li"><a href = "#" class = "hb_menu_a">Element</a></li>
                                <li class = "hb_menu_li"><a href = "#" class = "hb_menu_a">Element</a></li>
                                <li class = "hb_menu_li"><a href = "#" class = "hb_menu_a">Element</a></li>
                                <li class = "hb_menu_li"><a href = "#" class = "hb_menu_a">Element</a></li>
                            </ul>
                        </div>
                        <div class = "hb_menu">
                            <span class = "hb_menu_span">Contact</span>
                            <ul class = "hb_menu_ul">
                                <li class = "hb_menu_li"><a href = "#" class = "hb_menu_a">Element</a></li>
                                <li class = "hb_menu_li"><a href = "#" class = "hb_menu_a">Element</a></li>
                                <li class = "hb_menu_li"><a href = "#" class = "hb_menu_a">Element</a></li>
                                <li class = "hb_menu_li"><a href = "#" class = "hb_menu_a">Element</a></li>
                                <li class = "hb_menu_li"><a href = "#" class = "hb_menu_a">Element</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div id = "logo_serch">
                    <div class = "logo">
                        <span id = "logo_1"><a href = "#">McClenny Theme</a><br>
                            <span style = "font-size: 10px; color: #8f8f8f;">Another Wordpress Blog Description</span>
                        </span>
                    </div>
                    <div class = "logo">
                        <input id = "serch" type = "text" placeholder = "Serch...">
                    </div>
                </div>
            </div>
        </div>  
    </body>
</html>

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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
//div{
    border: 1px solid black;
}
body{
    position: relative;
}
#body{
    width: 1404px;
    height: 2002px;
    margin: 0 auto;
    outline: 1px solid black;
    background-image: url("images/background.jpg");
}
#main{
    width: 998px;
    height: 1729px;
    margin: 36px 202px 236px 203px;
    position: absolute;
    background: white;
    box-shadow: 0 8px 10px black;
}
#header{
    
    height: 84px;
    width: 998px;
    border-bottom: 1px solid #bcbcbc;
}
#header_top{
    position: absolute;
    margin-top: 0px;
    height: 40px;
    width: 998px;
    border-bottom: 1px solid #dddddd;
    background: #eeeeee;
}
#ts_left{
    padding-left: 49px;
    color: #666666;
    font-size: 11px;
    line-height: 40px;
    float: left;
}
#ts_left a{
    color: #666666;
    text-decoration: none;
}
#header_ul{
    list-style: none;
    margin: 0;
}
.head_li{
    display: inline;
    font-size: 9px;
    color: #666666;
    line-height: 40px;
    float: left;
    margin-right: 2px;
}
#header_ul a{
    color: #666666;
}
#header_ul li:first-child{
    padding-left: 365px;
}
#header_bottom{
    position: absolute;
    margin-top: 41px;
    width: 998px;
    height: 43px;
    background: url("images/backgroud_topmenu_03.png");
}
#about{
    margin-left: 49px;
}
.hb_menu{
    float: left;
    background: url("images/fon_about_03.png") no-repeat;
    width: 92px;
    height: 43px;
    
}
.hb_menu:hover{
    background: url("images/fon_about_black_05.png") no-repeat;
}
.hb_menu ul{
    list-style: none;
    display: none;
}
.hb_menu_li{
    width: 108px;
    height: 29px;
    background: url("images/backgroud_topmenu_03.png");
    border: 1px solid #bcbcbc;
}
.hb_menu_a{
    padding-left: 27px;
    text-decoration: none;
    color: #bcbcbc;
    line-height: 29px;
}
.hb_menu_a:hover{
    color: #333333;
}
.hb_menu:hover ul{
    display: block;
    color: #bcbcbc;
    padding: 27px 0 0 0;
}
.hb_menu_span{
    position: absolute;
    width: 85px;
    height: 29px;
    padding: 14px 0 0 7px;
    color: #bcbcbc;
}
.hb_menu_span:hover{
    color: #333333;
}
#logo_serch{
    height: 128px;
    width: 998px;
}
.logo{
    width: 499px;
    height: 128px;
    float: left;
}
#logo_1{
    position: absolute;
    font-size: 30px;
    padding: 37px 0 8px 49px;
}
#logo_1 a{
    text-decoration: none;
    color: #333333; 
}
#serch{
    height: 30px;
    width: 218px;
    border: 1px solid #dddddd;
    background: #f8f8f8;
    color: #333333;
    margin: 36px 0 0 190px;
    padding-left: 5px;
}
#serch:focus{
    outline: none;
}

@Kven-M · 29.08.2015, 19:35

Попробуй блок с id=logo_serch, поставить перед началом блока id=header.

@a4t_ech · 29.08.2015, 19:58 **[ТС]**

разве таким способом не станет все с головы на ноги...возможно есть другие варианты?

@Kven-M · 29.08.2015, 20:18

Не должно, даже если ты попробуешь и не получится, то всегда можно все вернуть обратно. У меня подобные ситуации бывали и проблема была именно в разметке.

Добавлено через 10 минут
Поменяв блоки местами, задай в css для блока с id logo_serch следующие параметры, position: absolute; top: 100px

@ns16 · 29.08.2015, 20:25

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

пробовал играть с z-index - без результатов

Плохо пробовали, задайте для #header_bottom z-index: 1. Должно помочь, хотя это не самый лучший вариант.

@a4t_ech · 29.08.2015, 20:34 **[ТС]**

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

#header_bottom z-index: 1

работает! каюсь, для этого дива не пробовал! спасибо! а какой лучше вариант?

@ns16 · 29.08.2015, 20:44

Я бы убрал position: absolute из тех правил, где можно обойтись без него. Для #header_bottom установил бы position: relative, чтобы он вместе со всеми его дочерними элементами, располагался как бы над всеми остальными элементами. А для #logo_1 задал бы display: inline-block, чтобы надписи не сдвинулись, после того, как мы уберем абсолютное позиционирование.

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

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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
div {
    /*border: 1px solid black;*/
}
body {
    position: relative;
}
#body {
    width: 1404px;
    height: 2002px;
    margin: 0 auto;
    outline: 1px solid black;
    background-image: url("images/background.jpg");
}
#main {
    width: 998px;
    height: 1729px;
    margin: 36px 202px 236px 203px;
    position: absolute;
    background: white;
    box-shadow: 0 8px 10px black;
}
#header {
    height: 84px;
    width: 998px;
    border-bottom: 1px solid #bcbcbc;
}
#header_top {
    /*position: absolute;*/
    /*margin-top: 0px;*/
    height: 40px;
    width: 998px;
    border-bottom: 1px solid #dddddd;
    background: #eeeeee;
}
#ts_left {
    padding-left: 49px;
    color: #666666;
    font-size: 11px;
    line-height: 40px;
    float: left;
}
#ts_left a {
    color: #666666;
    text-decoration: none;
}
#header_ul {
    list-style: none;
    margin: 0;
}
.head_li {
    display: inline;
    font-size: 9px;
    color: #666666;
    line-height: 40px;
    float: left;
    margin-right: 2px;
}
#header_ul a {
    color: #666666;
}
#header_ul li:first-child {
    padding-left: 365px;
}
#header_bottom {
    /*position: absolute;*/
    /*margin-top: 41px;*/
    position: relative;
    width: 998px;
    height: 43px;
    background: url("images/backgroud_topmenu_03.png");
}
#about {
    margin-left: 49px;
}
.hb_menu {
    float: left;
    background: url("images/fon_about_03.png") no-repeat;
    width: 92px;
    height: 43px;
}
.hb_menu:hover {
    background: url("images/fon_about_black_05.png") no-repeat;
}
.hb_menu ul {
    list-style: none;
    display: none;
}
.hb_menu_li {
    width: 108px;
    height: 29px;
    background: url("images/backgroud_topmenu_03.png");
    border: 1px solid #bcbcbc;
}
.hb_menu_a {
    padding-left: 27px;
    text-decoration: none;
    color: #bcbcbc;
    line-height: 29px;
}
.hb_menu_a:hover{
    color: #333333;
}
.hb_menu:hover ul {
    display: block;
    color: #bcbcbc;
    padding: 27px 0 0 0;
}
.hb_menu_span {
    position: absolute;
    width: 85px;
    height: 29px;
    padding: 14px 0 0 7px;
    color: #bcbcbc;
}
.hb_menu_span:hover {
    color: #333333;
}
#logo_serch {
    height: 128px;
    width: 998px;
}
.logo {
    width: 499px;
    height: 128px;
    float: left;
}
#logo_1 {
    /*position: absolute;*/
    display: inline-block;
    font-size: 30px;
    padding: 37px 0 8px 49px;
}
#logo_1 a {
    text-decoration: none;
    color: #333333; 
}
#serch {
    height: 30px;
    width: 218px;
    border: 1px solid #dddddd;
    background: #f8f8f8;
    color: #333333;
    margin: 36px 0 0 190px;
    padding-left: 5px;
}
#serch:focus {
    outline: none;
}

@a4t_ech · 29.08.2015, 21:03 **[ТС]**

Вы правы! так намного лучше! спасибо

Новые блоги и статьи Все статьи Все блоги /
Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	[В процессе разработки] SDL3 для Web (WebAssembly): Сборка библиотек SDL3 и Box2D из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия SDL 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual. . .	SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .
Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»

Магия выпадающего меню

Решение

Решение

@Kven-M 32 / 32 / 24 Регистрация: 16.04.2015 Сообщений: 219
	29.08.2015, 19:35
	Попробуй блок с id=logo_serch, поставить перед началом блока id=header. 0

@a4t_ech 4 / 4 / 2 Регистрация: 10.08.2015 Сообщений: 162
	29.08.2015, 19:58 [ТС]
	разве таким способом не станет все с головы на ноги...возможно есть другие варианты? 0

@Kven-M 32 / 32 / 24 Регистрация: 16.04.2015 Сообщений: 219
	29.08.2015, 20:18
	Не должно, даже если ты попробуешь и не получится, то всегда можно все вернуть обратно. У меня подобные ситуации бывали и проблема была именно в разметке. Добавлено через 10 минут Поменяв блоки местами, задай в css для блока с id logo_serch следующие параметры, position: absolute; top: 100px 0

@a4t_ech 4 / 4 / 2 Регистрация: 10.08.2015 Сообщений: 162
	29.08.2015, 21:03 [ТС]
	Вы правы! так намного лучше! спасибо 0