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

Создание выпадающего меню

05.11.2016, 01:06. Показов 1083. Ответов 1
Метки нет (Все метки)
Как из этого меню сделать выпадающее вниз меню с подпунктами?
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

#menu {clear: both;/*Отменяет обтекание элемента одновременно с правого и левого края.*/ width:100%;/*ширина меню*/}
        #menu ul {display:block;width:100%;height:auto;margin:0px;padding:0px;list-style:none;position:relative; border-bottom:1px solid #fed11c; margin-bottom:10px; margin-top:10px;}
         #menu ul li{display:block; width:100%; height:auto; position:relative;}
         #menu ul li a{  
            position:relative; 
            display:block;
            width:100%;
                  height:auto;
                  box-sizing:border-box;
                  font-size:13px;
                  text-transform:uppercase;
                  font-weight:bold;
                  color:#e2760a;
                  line-height:1.2em;
                  padding:10px 15px;
                  border-top:1px solid #fed11c;
                  text-decoration:none;}
              #menu ul li a:hover, #menu ul li:hover a{ color:#0A3CC1; }
              #menu  ul li ul { position:absolute;
                  top:0px;
                   left:100%;
                  display:none;
                  width:auto}
                 /*******показываем выпададающее меню при наведении ********/
                  #menu ul li:hover ul{display:block;}
                  #menu ul li ul li a { white-space:nowrap;text-transform:none;padding:5px 20px; background:#fff0a5; color:#e2760a;}
                  #menu ul li ul li a:hover{color:#0A3CC1;}
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

<div id=menu>
                        <ul>
                            <li><a href="#">1</a>
                                <ul>
                                    <li><a href="#">1.1</a></li>
                                    <li><a href="#">1.2</a></li>
                                </ul>
                            </li>
                            <li><a href="#">2</a>
                                <ul>
                                    <li><a href="#">2.1</a></li>
                                    <li><a href="#">2.2</a></li>
                                </ul>
                            </li>
                            <li><a href="#">3</a>
                                <ul>
                                    <li><a href="#">3.1</a></li>
                                    <li><a href="#">3.2</a></li>
                                </ul>
                            </li>
                            <li><a href="#">4</a>
                                <ul>
                                    <li><a href="#">4.1</a></li>
                                    <li><a href="#">4.2</a></li>
                                </ul>
                            </li>
                            <li><a href="#">5</a>
                                <ul>
                                    <li><a href="#">5.1</a></li>
                                    <li><a href="#">5.2</a></li>
                                </ul>
                            </li>
                            <li><a href="#">6</a>
                                <ul>
                                    <li><a href="#">6.1</a></li>
                                    <li><a href="#">6.2</a></li>
                                </ul>
                            </li>
                            <li><a href="#">7</a>
                                <ul>
                                    <li><a href="#">7.1</a></li>
                                    <li><a href="#">7.2</a></li>
                                </ul>
                            </li>
                            <li><a href="#">8</a>
                                <ul>
                                    <li><a href="#">8.1</a></li>
                                    <li><a href="#">8.2</a></li>
                                </ul>
                            </li>
                            <li><a href="#">9</a>
                                <ul>
                                    <li><a href="#">9.1</a></li>
                                    <li><a href="#">9.2</a></li>
                                </ul>
                            </li>
                            <li><a href="#">10</a>
                                <ul>
                                    <li><a href="#">10.1</a></li>
                                    <li><a href="#">10.2</a></li>
                                </ul>
                            </li>
                        </ul>   
                </div>
__________________
Помощь в написании контрольных, курсовых и дипломных работ, диссертаций здесь
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
 05.11.2016, 01:06
Ответы с готовыми решениями:

Создание выпадающего подпункта в меню
Добрый день. Не получается реализовать выпадающий подпункт в меню. Памагите =D Туторы на ютубе и...

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

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

Магия выпадающего меню
Создал горизонтальное меню, при наведении курсора мыши на его пункты выпадает вертикальное меню,...

1
Богатый духовно
455 / 262 / 145
Регистрация: 10.03.2015
Сообщений: 1,058
05.11.2016, 01:26 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

#menu {clear: both;/*Отменяет обтекание элемента одновременно с правого и левого края.*/ width:100%;/*ширина меню*/}
        #menu ul {display:block;width:100%;height:auto;margin:0px;padding:0px;list-style:none;position:relative; border-bottom:1px solid #fed11c; margin-bottom:10px; margin-top:10px;}
         #menu ul li{display:block; width:100%; height:auto; position:relative;}
         #menu ul li a{  
            position:relative; 
            display:block;
            width:100%;
                  height:auto;
                  box-sizing:border-box;
                  font-size:13px;
                  text-transform:uppercase;
                  font-weight:bold;
                  color:#e2760a;
                  line-height:1.2em;
                  padding:10px 15px;
                  border-top:1px solid #fed11c;
                  text-decoration:none;}
              #menu ul li a:hover, #menu ul li:hover a{ color:#0A3CC1; }
              #menu  ul li ul { 
                  top:0px;
                   left:0;
                  display:none;
                  width:auto}
                 /*******показываем выпададающее меню при наведении ********/
                  #menu ul li:hover ul{display:block;}
                  #menu ul li ul li a { white-space:nowrap;text-transform:none;padding:5px 20px; background:#fff0a5; color:#e2760a;}
                  #menu ul li ul li a:hover{color:#0A3CC1;}
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

<div id=menu>
                        <ul>
                            <li><a href="#">1</a>
                                <ul>
                                    <li><a href="#">1.1</a></li>
                                    <li><a href="#">1.2</a></li>
                                </ul>
                            </li>
                            <li><a href="#">2</a>
                                <ul>
                                    <li><a href="#">2.1</a></li>
                                    <li><a href="#">2.2</a></li>
                                </ul>
                            </li>
                            <li><a href="#">3</a>
                                <ul>
                                    <li><a href="#">3.1</a></li>
                                    <li><a href="#">3.2</a></li>
                                </ul>
                            </li>
                            <li><a href="#">4</a>
                                <ul>
                                    <li><a href="#">4.1</a></li>
                                    <li><a href="#">4.2</a></li>
                                </ul>
                            </li>
                            <li><a href="#">5</a>
                                <ul>
                                    <li><a href="#">5.1</a></li>
                                    <li><a href="#">5.2</a></li>
                                </ul>
                            </li>
                            <li><a href="#">6</a>
                                <ul>
                                    <li><a href="#">6.1</a></li>
                                    <li><a href="#">6.2</a></li>
                                </ul>
                            </li>
                            <li><a href="#">7</a>
                                <ul>
                                    <li><a href="#">7.1</a></li>
                                    <li><a href="#">7.2</a></li>
                                </ul>
                            </li>
                            <li><a href="#">8</a>
                                <ul>
                                    <li><a href="#">8.1</a></li>
                                    <li><a href="#">8.2</a></li>
                                </ul>
                            </li>
                            <li><a href="#">9</a>
                                <ul>
                                    <li><a href="#">9.1</a></li>
                                    <li><a href="#">9.2</a></li>
                                </ul>
                            </li>
                            <li><a href="#">10</a>
                                <ul>
                                    <li><a href="#">10.1</a></li>
                                    <li><a href="#">10.2</a></li>
                                </ul>
                            </li>
                        </ul>   
                </div>
1
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
 05.11.2016, 01:26
Помогаю со студенческими работами здесь

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

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

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

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


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

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

КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2023, CyberForum.ru