Как сделать горизонтальное, выподающее меню на сайте?

@verbenin · Регистрация: 19.12.2011

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

Как сделать горизонтальное, выподающее меню на сайте? Сайт основан на системе юкоз, левое вертикальное меню не устраивает! Через конструктор меню делать пытался, но не получилось (меню вообще видно не было, хотя я его активировал), тогда мне пришла в голову замечательная идея - нарисовать в фотошопе каждую кнопку меню, потом получить HTML код картинки, сделать её кликательной, разместить в шаблоне сайта и будет тоже замечательное меню. Но есть одно НО! Дело в том, что меню то может быть и замечательным будет, но оно не будет выпадающим. Помогите!!!

@TopLoader · 01.01.2012, 13:53

Горизонтальное выпадающее меню делается примерно так:

html

HTML5
1
2
3
4
5
6
7
8
9
10
<div class="mainmenu">
<ul>
      <li class="li_nc"><a href="/" target="_self" >Пункт 1</a></li>
      <li class="li_hc"><a href="#" target="_self" >Пункт 2</a><ul class="ul_ch">
         <li class="li_nc"><a href="#" target="_self" >Подпункт 1</a></li>
         <li class="li_nc"><a href="#" target="_self" >Подпункт 2</a></li>
         <li class="li_nc"><a href="#" target="_self" >Подпункт 3</a></li>
      </ul></li>
</ul>
</div>

+

css

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
.mainmenu{
    float: left;
    width: 100%;
    padding: 0;
}
.mainmenu ul {
    float: left;
    width: 100%;
    list-style: none;
    line-height: 1;
    color:#FFFF00;
    background: #000080;
    padding: 0;
    border: solid #A0A0A4;
    border-width: 1px 0;
    margin: 0 0 1em 0;
}
 
.mainmenu a, .mainmenu a:visited {
    display: block;
font-family:;font-size:;font-weight:;font-style:;text-decoration:;
    color: #FFFF00;
    text-decoration: none;
    padding: 1em 1em;
}
.mainmenu ul ul a{
    width:100%;
    height:100%;
}
.mainmenu ul a{
    width:1%;
}
 
 
.mainmenu li  {
    float: left;
    margin:0;
    padding:0;
}
 
.mainmenu ul li {float:left; position:relative;  }
.mainmenu ul li a {white-space:nowrap;}
    
.mainmenu li ul {
    position: absolute;
    left: -999em;
    height: auto;
    width:15em; 
    
    background: #000080;
    font-weight: normal;
    border-width: 1px;
    margin: 0;
}
 
.mainmenu li li {
    width:15em ;
}
 
.mainmenu li li a{
    width:13em ;
}
 
.mainmenu li ul  {
    margin: 0;
}
.mainmenu li ul ul {
    margin: -2.8em 0 0 13.5em;
}
.ul_ch, 
.mainmenu li:hover ul ul,
.mainmenu li li:hover ul ul,
.mainmenu li li li:hover ul ul,
.mainmenu li li li li:hover ul ul,
.mainmenu li li li li li:hover ul ul
{
    left: -999em;
}
.mainmenu li:hover ul,
.mainmenu li li:hover ul,
.mainmenu li li li:hover ul,
.mainmenu li li li li:hover ul,
.mainmenu li li li li li:hover ul
{
    left: auto;
}
.mainmenu li:hover>ul.ul_ch   
{
    left: auto;
}
 
.mainmenu li:hover{
    background: #FF0000;
}
 
.mainmenu li:hover a,.mainmenu li:hover a:visited,.mainmenu li:hover a:hover,.mainmenu li a:hover{
    color:#FFFF00;
}
.mainmenu li:hover li a, .mainmenu li li:hover li a, 
.mainmenu li li li:hover li a, .mainmenu li li li li:hover li a,
.mainmenu li:hover li a:visited, .mainmenu li li:hover li a:visited, 
.mainmenu li li li:hover li a:visited, .mainmenu li li li li:hover li a:visited
{
    color:#FFFF00;
}
.mainmenu li li:hover, .mainmenu li li li:hover, 
.mainmenu li li li li:hover , .mainmenu li li li li li:hover , .mainmenu li li li li li li:hover 
{
    background: #B90000;
    z-index:9999;
}
.mainmenu li li:hover a,.mainmenu li li li:hover a, 
.mainmenu li li li li:hover a, .mainmenu li li li li li:hover a
{
    color: #FFFF00; 
}
 
.mainmenu ul ul a, .mainmenu ul ul a:visited,
.mainmenu li li a, .mainmenu li li a:visited
{
    color: #FFFF00;
}
.mainmenu ul ul a:hover,
.mainmenu li:hover li:hover a,.mainmenu li:hover li:hover a:visited ,
.mainmenu li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover a:visited,
.mainmenu li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover a:visited ,
.mainmenu li:hover li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover li:hover a:visited,
.mainmenu li:hover li:hover li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover li:hover li:hover a:visited{
    color: #FFFF00;
}
.mainmenu li:hover li:hover li a,.mainmenu li:hover li:hover li a:visited ,
.mainmenu li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li a:visited,
.mainmenu li:hover li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li:hover li a:visited,
.mainmenu li:hover li:hover li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li:hover li:hover li a:visited{
    color: #FFFF00;
}

@verbenin · 01.01.2012, 17:53 **[ТС]**

Всё понял, спасибо, а что - надо редактировать и CSS и HTML или можно вставить HTML но не вставлять CSS или ноборот?))) Простите за тупые вопросы, я просто в этих языках программирования полный чайник(.

@TopLoader · 01.01.2012, 18:29

Нужно и то, и другое.

html - это сама разметка страницы, а css - описание стилей элементов страницы.

В "тело" страницы (между тегами <body> и </body>) вставляете html-код меню.
Стили css храните в:

отдельном файле с расширением .css
Тогда в html-коде страницы между тегами <head> и </head> подключите стиль:
HTML5
1
<link rel="stylesheet" type="text/css" href="style.css">
Где style.css — имя вашего файла со стилями
коде самой странички (Если, например, юкоз не позволяет создать файл стилей)
В этом случаи стили из сообщения #2 вставляйте с помощью тега style в любом месте кода вашей странички:
HTML5
1 2 3 4 5
<style type="text/css">  </style>

@verbenin · 01.01.2012, 21:18 **[ТС]**

ага, спасибо большое всё понял)

@DenQ · 01.01.2012, 21:35

Сообщение от verbenin

я просто в этих языках программирования полный чайник

На будущее - это не языки программирования

12.04.2012, 18:15

Привет, скажите пожалуйста что означает символ больше в css коде вот в этой строке

CSS
1
2
3
4
.mainmenu li:hover>ul.ul_ch   
{
    left: auto;
}

08.07.2013, 13:29

Сообщение от TopLoader

Горизонтальное выпадающее меню делается примерно так:

html

HTML5
1
2
3
4
5
6
7
8
9
10
<div class="mainmenu">
<ul>
      <li class="li_nc"><a href="/" target="_self" >Пункт 1</a></li>
      <li class="li_hc"><a href="#" target="_self" >Пункт 2</a><ul class="ul_ch">
         <li class="li_nc"><a href="#" target="_self" >Подпункт 1</a></li>
         <li class="li_nc"><a href="#" target="_self" >Подпункт 2</a></li>
         <li class="li_nc"><a href="#" target="_self" >Подпункт 3</a></li>
      </ul></li>
</ul>
</div>

+

css

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
.mainmenu{
    float: left;
    width: 100%;
    padding: 0;
}
.mainmenu ul {
    float: left;
    width: 100%;
    list-style: none;
    line-height: 1;
    color:#FFFF00;
    background: #000080;
    padding: 0;
    border: solid #A0A0A4;
    border-width: 1px 0;
    margin: 0 0 1em 0;
}
 
.mainmenu a, .mainmenu a:visited {
    display: block;
font-family:;font-size:;font-weight:;font-style:;text-decoration:;
    color: #FFFF00;
    text-decoration: none;
    padding: 1em 1em;
}
.mainmenu ul ul a{
    width:100%;
    height:100%;
}
.mainmenu ul a{
    width:1%;
}
 
 
.mainmenu li  {
    float: left;
    margin:0;
    padding:0;
}
 
.mainmenu ul li {float:left; position:relative;  }
.mainmenu ul li a {white-space:nowrap;}
    
.mainmenu li ul {
    position: absolute;
    left: -999em;
    height: auto;
    width:15em; 
    
    background: #000080;
    font-weight: normal;
    border-width: 1px;
    margin: 0;
}
 
.mainmenu li li {
    width:15em ;
}
 
.mainmenu li li a{
    width:13em ;
}
 
.mainmenu li ul  {
    margin: 0;
}
.mainmenu li ul ul {
    margin: -2.8em 0 0 13.5em;
}
.ul_ch, 
.mainmenu li:hover ul ul,
.mainmenu li li:hover ul ul,
.mainmenu li li li:hover ul ul,
.mainmenu li li li li:hover ul ul,
.mainmenu li li li li li:hover ul ul
{
    left: -999em;
}
.mainmenu li:hover ul,
.mainmenu li li:hover ul,
.mainmenu li li li:hover ul,
.mainmenu li li li li:hover ul,
.mainmenu li li li li li:hover ul
{
    left: auto;
}
.mainmenu li:hover>ul.ul_ch   
{
    left: auto;
}
 
.mainmenu li:hover{
    background: #FF0000;
}
 
.mainmenu li:hover a,.mainmenu li:hover a:visited,.mainmenu li:hover a:hover,.mainmenu li a:hover{
    color:#FFFF00;
}
.mainmenu li:hover li a, .mainmenu li li:hover li a, 
.mainmenu li li li:hover li a, .mainmenu li li li li:hover li a,
.mainmenu li:hover li a:visited, .mainmenu li li:hover li a:visited, 
.mainmenu li li li:hover li a:visited, .mainmenu li li li li:hover li a:visited
{
    color:#FFFF00;
}
.mainmenu li li:hover, .mainmenu li li li:hover, 
.mainmenu li li li li:hover , .mainmenu li li li li li:hover , .mainmenu li li li li li li:hover 
{
    background: #B90000;
    z-index:9999;
}
.mainmenu li li:hover a,.mainmenu li li li:hover a, 
.mainmenu li li li li:hover a, .mainmenu li li li li li:hover a
{
    color: #FFFF00; 
}
 
.mainmenu ul ul a, .mainmenu ul ul a:visited,
.mainmenu li li a, .mainmenu li li a:visited
{
    color: #FFFF00;
}
.mainmenu ul ul a:hover,
.mainmenu li:hover li:hover a,.mainmenu li:hover li:hover a:visited ,
.mainmenu li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover a:visited,
.mainmenu li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover a:visited ,
.mainmenu li:hover li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover li:hover a:visited,
.mainmenu li:hover li:hover li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover li:hover li:hover a:visited{
    color: #FFFF00;
}
.mainmenu li:hover li:hover li a,.mainmenu li:hover li:hover li a:visited ,
.mainmenu li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li a:visited,
.mainmenu li:hover li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li:hover li a:visited,
.mainmenu li:hover li:hover li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li:hover li:hover li a:visited{
    color: #FFFF00;
}

Здравствуйте, установил ваше горизонтальное меню, но у меня возникла проблема, когда нажимать на пункты меню то сперва оно перекидывает на главную страницу, а за вторым кликом уже по пути категории. Что делать в чем может быть проблема? помогите пожалуйстам

Новые блоги и статьи Все статьи Все блоги /
Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .
Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .	Фото: Daniel Greenwood kumehtar 13.11.2025	Расскажи мне о Мире, бродяга kumehtar 12.11.2025 — Расскажи мне о Мире, бродяга, Ты же видел моря и метели. Как сменялись короны и стяги, Как эпохи стрелою летели. - Этот мир — это крылья и горы, Снег и пламя, любовь и тревоги, И бескрайние. . .	PowerShell Snippets iNNOKENTIY21 11.11.2025 Модуль PowerShell 5. 1+ : Snippets. psm1 У меня модуль расположен в пользовательской папке модулей, по умолчанию: \Documents\WindowsPowerShell\Modules\Snippets\ А в самом низу файла-профиля. . .

@verbenin мастер ломания компов 30 / 36 / 1 Регистрация: 19.12.2011 Сообщений: 474 Записей в блоге: 1

	Как сделать горизонтальное, выподающее меню на сайте? 31.12.2011, 20:03. Показов 6235. Ответов 7 Метки нет (Все метки) Как сделать горизонтальное, выподающее меню на сайте? Сайт основан на системе юкоз, левое вертикальное меню не устраивает! Через конструктор меню делать пытался, но не получилось (меню вообще видно не было, хотя я его активировал), тогда мне пришла в голову замечательная идея - нарисовать в фотошопе каждую кнопку меню, потом получить HTML код картинки, сделать её кликательной, разместить в шаблоне сайта и будет тоже замечательное меню. Но есть одно НО! Дело в том, что меню то может быть и замечательным будет, но оно не будет выпадающим. Помогите!!! 0

@verbenin мастер ломания компов 30 / 36 / 1 Регистрация: 19.12.2011 Сообщений: 474 Записей в блоге: 1
	01.01.2012, 17:53 [ТС]
	Всё понял, спасибо, а что - надо редактировать и CSS и HTML или можно вставить HTML но не вставлять CSS или ноборот?))) Простите за тупые вопросы, я просто в этих языках программирования полный чайник(. 0

@verbenin мастер ломания компов 30 / 36 / 1 Регистрация: 19.12.2011 Сообщений: 474 Записей в блоге: 1
	01.01.2012, 21:18 [ТС]
	ага, спасибо большое всё понял) 0