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

@realzarab · Регистрация: 11.11.2011

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

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

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
<ul id="nav">
            <li><a href="/">ГЛАВНАЯ</a></li>
            
            <li><a href="ССЫЛКА"> МЕНЮ </a>
                <ul>
             <li><a href="ССЫЛКА">НАЗВАНИЕ ПОДМЕНЮ 1 </a></li>
 
             <li id=""><a href="ССЫЛКА">НАЗВАНИЕ ПОДМЕНЮ 2 </a></li>
             </ul>
            </li>
            
            <li><a href="ССЫЛКА"> МЕНЮ </a>
                <ul>
 
             <li><a href="ССЫЛКА">НАЗВАНИЕ ПОДМЕНЮ 1</a></li>
             <li><a href="ССЫЛКА">НАЗВАНИЕ ПОДМЕНЮ 2</a></li>
 
             </ul>
            </li>
            <li><a href="ССЫЛКА"> МЕНЮ </a>
                <ul>
             <li><a href="ССЫЛКА">НАЗВАНИЕ ПОДМЕНЮ 1</a></li>
 
             <li><a href="ССЫЛКА">НАЗВАНИЕ ПОДМЕНЮ 2</a></li>
             </ul>
            </li>
        </ul>

и стили для него:

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
#nav, #nav ul
{
        font-size: 12px;
        font-weight: bold;
        list-style: none;
        margin: 0; 
        padding:0;
        float: left;
}
#nav li
{ 
        float: left;
        position: relative;
}
#nav li a
{  
    font-size: 12px;
        color: #000000;
        line-height: 47px;
        padding: 0 20px 0 20px;
        display: block;
        text-align: center;
        border-right:1px solid #9F9FA4;
        margin: 1px 0 0 0 ;
        font-family:"Calibri", "Arial";
        text-decoration: none;
}
        #nav li :hover
        {   z-index:100;
                background: url(../images/nav-bg2.gif) top repeat-x;
                color: #ffffff;
                text-decoration: none;          
        }
        
        #nav2 li :hover
        {   z-index:100;
                color: #000000;
                text-decoration: none;          
        }
#nav li ul {
z-index:100;
  display: none;
  position: absolute;
  padding:0;
  clear:both;
}
#nav li li a {
clear:both;
min-width:80px;
padding:0 5px 0 5px;
color:#000000;
font-size:12px;
line-height:25px;
  background:#EBE9E9;
  border-bottom:2px solid #B0B0B0;
  border-left: 1px solid #9F9FA4;
  margin: -1px 0 0 0;
}
#nav li li a:hover {
  background:#c5c4cd;
  clear:both;
}
#nav li:hover ul {
  display: block;
  clear:both;
}

Вот мое меню:

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
/* menutop */
.thmenu { padding: 0 20px 0 8px; height: 41px; background: #fff url("../images/topmenu.jpg") no-repeat; }
.thmenu ul, .thmenu ul li, .thmenu ul li a, .thmenu ul li a img { float: left; height: 41px; }
.thmenu ul li a { padding: 0 8px; }
.thmenu ul img { background-image: url("../images/thmenu.png"); background-repeat: no-repeat; }
    .thmenu ul .lnk1 img { background-position: 0 0; width: 73px; }
    .thmenu ul .lnk2 img { background-position: -80px 0; width: 113px; }
    .thmenu ul .lnk3 img { background-position: -170px 0; width: 39px; }
    .thmenu ul .lnk4 img { background-position: -205px 0; width: 60px; }
    .thmenu ul .lnk5 img { background-position: -280px 0; width: 73px; }
    .thmenu ul .lnk6 img { background-position: -365px 0; width: 80px; }
    .thmenu ul .lnk7 img { background-position: -465px 0; width: 81px; }
    .thmenu ul .lnk8 img { background-position: -355px 0; width: 137px; }
 
    .thmenu ul li a:hover, .thmenu ul li a.selected { background-color: #a1a1a1; }
    .thmenu ul .lnk1 a:hover img, .thmenu ul .lnk1 a.selected img { background-position: 0 -41px; }
    .thmenu ul .lnk2 a:hover img, .thmenu ul .lnk2 a.selected img { background-position: -84px -41px; }
    .thmenu ul .lnk3 a:hover img, .thmenu ul .lnk3 a.selected img { background-position: -170px -41px; }
    .thmenu ul .lnk4 a:hover img, .thmenu ul .lnk4 a.selected img { background-position: -205px -41px; }
    .thmenu ul .lnk5 a:hover img, .thmenu ul .lnk5 a.selected img { background-position: -280px -41px; }
    .thmenu ul .lnk6 a:hover img, .thmenu ul .lnk6 a.selected img { background-position: -365px -41px; }
    .thmenu ul .lnk7 a:hover img, .thmenu ul .lnk7 a.selected img { background-position: -465px -41px; }
    .thmenu ul .lnk8 a:hover img, .thmenu ul .lnk8 a.selected img { background-position: -355px -41px; }
 
    .submenu { overflow: hidden; margin: -1px 0 0 0; background-color: #a1a1a1; position: absolute; top: 0; z-index:999; width: 160px; visibility: hidden;
        filter:alpha(opacity=90);
        -moz-opacity:0.90;
        -khtml-opacity: 0.90;
        opacity: 0.90;
    }
    .submenu ul { margin-top: -1px; }
    .submenu a { font-size: 1.2em; padding: 7px 0; display: block; color: #fff; background: url("../images/pointermenu.png") repeat-x; }
    .submenu a b { display: block; padding: 0 8px; cursor: pointer; }
    .submenu a:hover { background-color: #fff; color: #45423d; }
 
.socicon { display: inline; }
.socicon span { float: right; }
.socicon span img { float: left; margin: 11px 0 0 5px; }

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

@ПростоЯ · 09.02.2012, 23:29

вот очень много хороших меню с работающими кодами

@vadimgrig · 10.02.2012, 01:58

Ты конечно наморочил, в своём меню, кода лишнего ппц.
Любое всплывающее меню можно выполнить в HTML без скриптов.
Вот пример горизонтального и вертикального меню(код без оформления, и добавления граф. свойств).
Пример горизонтального.

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
<ul id="navHead">
                <li>Пограммы</li>
                <li id="drivers">Драйвера
                    <ul id="drvCat" >
                        <li><a>Windows</a></li>
                        <li><a>Linux</a></li>
                        <li><a>Mac OS</a></li>
                    </ul>
                </li>
                <li id="games">Игры
                    <ul id="gameCat">
                        <li><a>Аркады</a></li>
                        <li><a>Гонки</a></li>
                        <li><a>Квесты</a></li>
                        <li><a>Логические</a></li>
                        <li><a>РПГ</a></li>
                        <li><a>Спорт</a></li>
                        <li><a>Симуляторы</a></li>
                        <li><a>Стратегии</a></li>
                    </ul>
                </li>
                <li>Интернет
                    <ul>
                        <li>Броузеры</li>
                        <li>Торрент</li>
                        <li>Антивирус</li>
                        <li>Разработка</li>
                        <li>Домен и хостинг</li>
                    </ul>
 
                </li>
                <li><a>Сервер</a></li>
            </ul>

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
#navHead {
    outline: 1px solid red;
    width: 700px;
    height: 25px;
    margin: 0 auto;
}
#navHead li {
    outline: 1px solid green;
    position: relative;
    float: left;
    width: 100px;
}
#navHead li a{
    outline: 1px solid green;
    width: 100px;
    display: block;
}
#navHead li ul li {
    display: none;
    float: none;
}
#navHead li:hover ul {
    position: absolute;
}
#navHead li:hover ul li {
    display: 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
aside {
    outline: 0px solid red;
    width: 200px;
    height: 350px;
    border-radius: 5px;
    background-color: #882828;
}
aside h1 {
    width: 200px;
    float: left;
    font: 25px arial;
    color: #eaeac9;
}
aside li {
    outline: 0px solid green;
    position: relative;
    width: 100px;
}
aside li ul {
    display: none;
    position: absolute;
}
aside li:hover ul {
    display: block;
    top: 0;
    left: 100px;
    border: 1px solid black;
    background-color: brown;
}
aside li ul li {
    border: 1px solid black;
}

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<aside>
            <nav>
            <ul>
                <li>Категории
                    <ul>
                        <li><a>Лодки</a></li>
                        <li><a>Корабли</a></li>
                        <li><a>Танкеры</a></li>
                    </ul>
                </li>
                <li>Архив
                    <ul>
                        <li><a>2010</a></li>
                        <li><a>2011</a></li>
                        <li><a>2012</a></li>
                    </ul>
                </li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            </nav>    
        </aside>

Это для размышлений!!!

Добавлено через 1 минуту
Добавляй графику и вперёд!!!!

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@ПростоЯ 184 / 101 / 8 Регистрация: 30.05.2009 Сообщений: 782
	09.02.2012, 23:29
	вот очень много хороших меню с работающими кодами 0