Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Форум программистов и сисадминов Киберфорум > Форум вебмастеров > HTML, CSS
Войти
Регистрация
Восстановить пароль
Правила Карта Блоги Социальные группы Поиск Сообщения за день  
 
Рейтинг 4.67/6: Рейтинг темы: голосов - 6, средняя оценка - 4.67
4 / 4 / 2
Регистрация: 10.08.2015
Сообщений: 162
1

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

29.08.2015, 19:06. Показов 1091. Ответов 7
Метки нет (Все метки)
Создал горизонтальное меню, при наведении курсора мыши на его пункты выпадает вертикальное меню, все отлично...НО! под горизонтальными меню есть теги <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;
}
__________________
Помощь в написании контрольных, курсовых и дипломных работ здесь
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
 29.08.2015, 19:06
Ответы с готовыми решениями:

Изменить горизонтальное меню - сделать автозакрытие выпадающего меню после отвода курсора
Вообщем что имеем: http://test.aowserv.ru имеется горизонтальное меню, при наведении на кнопку...

Фон выпадающего меню
Должно быть Сделал вот Собственно вопрос: как сделать, чтобы background был 1 для всего...

Шаблон выпадающего меню
Здравствуйте. вопрос такой. имеются в коде html ссылки на шаблон css выпадающего меню &lt;link...

подпункты выпадающего меню
Подскажите, пожалуйста, где и как подправить в шаблоне такой момент: в мобильной версии выпадающие...

7
32 / 32 / 24
Регистрация: 16.04.2015
Сообщений: 219
29.08.2015, 19:35 2
Попробуй блок с id=logo_serch, поставить перед началом блока id=header.
0
4 / 4 / 2
Регистрация: 10.08.2015
Сообщений: 162
29.08.2015, 19:58  [ТС] 3
разве таким способом не станет все с головы на ноги...возможно есть другие варианты?
0
32 / 32 / 24
Регистрация: 16.04.2015
Сообщений: 219
29.08.2015, 20:18 4
Не должно, даже если ты попробуешь и не получится, то всегда можно все вернуть обратно. У меня подобные ситуации бывали и проблема была именно в разметке.

Добавлено через 10 минут
Поменяв блоки местами, задай в css для блока с id logo_serch следующие параметры, position: absolute; top: 100px
0
94 / 94 / 68
Регистрация: 26.03.2015
Сообщений: 248
29.08.2015, 20:25 5
Лучший ответ Сообщение было отмечено a4t_ech как решение

Решение

Цитата Сообщение от a4t_ech Посмотреть сообщение
пробовал играть с z-index - без результатов
Плохо пробовали, задайте для #header_bottom z-index: 1. Должно помочь, хотя это не самый лучший вариант.
1
4 / 4 / 2
Регистрация: 10.08.2015
Сообщений: 162
29.08.2015, 20:34  [ТС] 6
Цитата Сообщение от ns16 Посмотреть сообщение
#header_bottom z-index: 1
работает! каюсь, для этого дива не пробовал! спасибо! а какой лучше вариант?
0
94 / 94 / 68
Регистрация: 26.03.2015
Сообщений: 248
29.08.2015, 20:44 7
Лучший ответ Сообщение было отмечено a4t_ech как решение

Решение

Я бы убрал 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;
}
1
4 / 4 / 2
Регистрация: 10.08.2015
Сообщений: 162
29.08.2015, 21:03  [ТС] 8
Вы правы! так намного лучше! спасибо
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
 29.08.2015, 21:03

Оптмизация выпадающего меню
я создал выпадающее меню в одной таблице, при наведении выпадает всё что нужно, но если этот список...

Создание выпадающего меню
Как из этого меню сделать выпадающее вниз меню с подпунктами? #menu {clear: both;/*Отменяет...

Пункты выпадающего меню не опускаются
Здравствуйте! Делаю выпадающее меню. Одинаково на двух сайтах. На этом делала давно...

Создание выпадающего меню CSS
Добрый день. У меня никак не получается оформить выпадающее меню с помощью CSS. Подскажите, что...

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

По поводу анимации выпадающего меню
Знающие, подскажите как сейчас обстоят дела с анимацией менюшек. На js или извращаются на css? Я...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
8
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Реклама - Видео - Обратная связь
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.