0 / 0 / 0
Регистрация: 05.11.2016
Сообщений: 7

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

05.11.2016, 01:06. Показов 1208. Ответов 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
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
05.11.2016, 01:06
Ответы с готовыми решениями:

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

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

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

1
Богатый духовно
 Аватар для boilzzz
455 / 262 / 145
Регистрация: 10.03.2015
Сообщений: 1,057
05.11.2016, 01:26
песочница
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
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
05.11.2016, 01:26
Помогаю со студенческими работами здесь

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

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

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

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

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


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

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

Новые блоги и статьи
Blazor и контроллер сервопривода IoT Meadow Maple
Wired 11.07.2025
Я решил разобраться, как можно соединить современные веб-технологии с миром "железа". Интересная комбинация получилась из Blazor в качестве веб-интерфейса и микроконтроллера Meadow с его веб-сервером. . .
Генерация OpenQASM из кода Q#
EggHead 10.07.2025
Летом 2024-го я начал эксперименты с библиотекой Q# Bridge, и знаете что? Она оказалась просто находкой для тех, кто работает на стыке разных квантовых экосистем. Основная фишка этой библиотеки -. . .
Изучаем новый шаблон ИИ-чата .NET AI Chat Web App
stackOverflow 10.07.2025
В . NET появилось интересное обновление - новый шаблон ИИ-чата под названием . NET AI Chat Web App. Когда я впервые наткнулся на анонс этого шаблона, то сразу понял, что Microsoft наконец-то. . .
Результаты исследования от команды ARP (июль 2025 г.)
Programma_Boinc 10.07.2025
Результаты исследования от команды ARP (июль 2025 г. ) Африканский проект по дождям (ARP) World Community Grid снова запущен! Мы рады поделиться обновленной информацией о нашем прогрессе с осени. . .
Angular vs Svelte - что лучше?
Reangularity 09.07.2025
Сегодня рынок разделился на несколько четких категорий: тяжеловесы корпоративного уровня (Angular), гибкие универсалы (React), прогрессивные решения (Vue) и новая волна компилируемых фреймворков. . .
Code First и Database First в Entity Framework
UnmanagedCoder 09.07.2025
Entity Framework дает нам свободу выбора, предлагая как Code First, так и Database First подходы. Но эта свобода порождает вечный вопрос — какой подход выбрать? Entity Framework — это. . .
Как использовать Bluetooth-модуль HC-05 с Arduino
Wired 08.07.2025
Bluetooth - это технология, созданная чтобы заменить кабельные соединения. Обычно ее используют для связи небольших устройств: мобильных телефонов, ноутбуков, наушников и т. д. Работает она на частоте. . .
Руководство по структурам данных Python
AI_Generated 08.07.2025
Я отчетливо помню свои первые серьезные проекты на Python - я писал код, он работал, заказчики были относительно довольны. Но однажды мой наставник, взглянув на мою реализацию поиска по огромному. . .
Тестирование энергоэффективности и скорости вычислений видеокарт в BOINC проектах
Programma_Boinc 08.07.2025
Тестирование энергоэффективности и скорости вычислений видеокарт в BOINC проектах Опубликовано: 07. 07. 2025 Рубрика: Uncategorized Автор: AlexA Статья размещается на сайте с разрешения. . .
Раскрываем внутренние механики Android с помощью контекста и манифеста
mobDevWorks 07.07.2025
Каждый Android-разработчик сталкивается с Context и манифестом буквально в первый день работы. Но много ли мы задумываемся о том, что скрывается за этими обыденными элементами? Я, честно говоря,. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru