Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.64/11: Рейтинг темы: голосов - 11, средняя оценка - 4.64
1 / 2 / 3
Регистрация: 14.03.2012
Сообщений: 84
1

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

20.07.2012, 19:48. Просмотров 2177. Ответов 8
Метки нет (Все метки)

Всем привет, у меня маленькая проблема такая. Есть выпадающее меню и под ним блок, но когда я навожу на пункт меню выпадающая часть вылазит не поверх нижнего блока а под ним.
Подскажите в чём моя ошибка?
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
20.07.2012, 19:48
Ответы с готовыми решениями:

Выпадающее меню - разный размер шрифта для разных уровней меню
Есть у меня данный список, но возник вопрос: "как сделать чтобы в надписи буквы1 был шрифт 19px, а...

Выпадающее меню. Не фиксируется бордер раздела меню, при использовании подменю
Делаю выпадающее меню, почти все сделал, осталось по сути немного, и не могу закончить. Вот код:...

Выпадающее меню
Добрый день, подскажите пожалуйста почему при верстке выпадающего меню в ие7 возникают след....

Выпадающее меню
Доброго времени суток! При создании выпадающего меню в футере работает без проблем, но как только...

8
56 / 56 / 14
Регистрация: 02.03.2010
Сообщений: 407
20.07.2012, 20:53 2
Цитата Сообщение от tsohg15 Посмотреть сообщение
Подскажите в чём моя ошибка?
код покажи для начала.
Можно попробовать дать элементам меню свойства
CSS
1
2
position:absolute;
z-index:20;
1
Эксперт JSЭксперт HTML/CSS
2422 / 1101 / 309
Регистрация: 23.06.2011
Сообщений: 3,450
20.07.2012, 20:57 3
Цитата Сообщение от tsohg15 Посмотреть сообщение
Подскажите в чём моя ошибка?
В отсутствии исходного кода. Полного, скопировал, запустил, посмотрел. Чем меньше возни с кодом, тем больше желающих в нем поковыряться.
1
1 / 2 / 3
Регистрация: 14.03.2012
Сообщений: 84
20.07.2012, 21:02  [ТС] 4
ага спс зет индекса небыло

Добавлено через 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 секунд
теперь когда я навожу на пункт меню все норм вылазит но нажать на под пункты не успеваю исчезают
0
56 / 56 / 14
Регистрация: 02.03.2010
Сообщений: 407
20.07.2012, 21:08 5
Цитата Сообщение от tsohg15 Посмотреть сообщение
теперь когда я навожу на пункт меню все норм вылазит но нажать на под пункты не успеваю исчезают
Я тут выкладывал свое выпадающее меню которое доработал Выпадающее меню свдигает ниже лежащие блоки
Может подойдет. Код пока нет времени разбирать

Хотя по структуре мой CSS код как раз под "двух ярусное" меню как у тебя.
1
1 / 2 / 3
Регистрация: 14.03.2012
Сообщений: 84
20.07.2012, 21:16  [ТС] 6
ну у тебя меню вертикальное а у меня горизонтальное так что не подойдёт))
я кстати тоже первоначально брал то меню с руселлера и также переделывал получилось неплохо думаю
0
1 / 2 / 3
Регистрация: 14.03.2012
Сообщений: 84
23.07.2012, 06:19  [ТС] 7
ну кто нибудь ещё поможет дельным советом
0
Эксперт JSЭксперт HTML/CSS
2422 / 1101 / 309
Регистрация: 23.06.2011
Сообщений: 3,450
24.07.2012, 20:42 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
<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;}
1
1 / 1 / 0
Регистрация: 26.07.2012
Сообщений: 6
26.07.2012, 14:56 9
необходимо у li задать min-height
1
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
26.07.2012, 14:56

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

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

Выпадающее меню
Всем привет. Я в этом деле новичок.....подскажите пожалуйста, как создать на странице выпадающее...

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

Выпадающее меню
Подскажите что надо вставить в этот код, чтобы получилось выпадающее меню: /* Menu */ #menu {...


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

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

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