Выпадающие горизонтальное меню

@Just_al · Регистрация: 20.01.2012

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

Всем привет. Столкнулся с проблемой. Никак не могу создать нормальное выпадающие горизонтальное меню. Всё почти получилось но очень надо чтоб текст в выпадающем меню был выровнен по середине и в идеале чтоб пр нажатии например на "Авто" выпадающие меню появилось не исчезало пока не нажмешь на другой раздел. Помогите пожалуйста. Парюсь с этой проблемой уже второй день(

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
<div id="navBar1">
        <div id="new1">                           
                <ul>
                    <li class="headerList1"><a href="#"> Главная</a></li>   
                    <li class="headerList1"><span><a href="#">Авто</a></span>   
                            <ul class="headerList2">
                                <li> <a href="#">Авто Центры</a></li>
                                <li> <a href="#">Авто Завчасти</a></li>
                                <li> <a href="#">Торговые Комплексы</a></li>
                                <li> <a href="#">Страхование</a></li>
                                <li> <a href="#">МРЭО</a></li>
                                <li> <a href="#">СТО</a></li>
                            </ul>
                    </li>
                    <li class="headerList1"><span><a href="#">Вело</a></span>
                        <ul class="headerList2">
                            <li> <a href="#"> Магазины</a></li>
                            <li> <a href="#"> Запчасти </a></li>
                            <li> <a href="#"> Ремонт </a></li>
                            <li> <a href="#"> Купля-Продажа </a></li>
                        </ul>
                    </li>
                    <li class="headerList1"><span><a href="#">Мото</a></span>
                        <ul class="headerList2">
                            <li> <a href="#"> Магазины</a></li>
                            <li> <a href="#"> Запчасти </a></li>
                            <li> <a href="#"> Ремонт </a></li>
                            <li> <a href="#"> Купля-Продажа </a></li>
                            <li> <a href="#"> Страхование</a></li>
                            <li> <a href="#"> МРЭО</a></li>
                        </ul>
                    </li>
                    <li class="headerList1"><span><a href="#">Реклама</a></span>
                        <ul class="headerList2">
                            <li> <a href="#"> Услуги</a></li>
                            <li> <a href="#"> Размещение рекламы на сайте</a></li>
                            <li> <a href="#"> Размещение рекламы в автоцентрах</a></li>
                            <li> <a href="#"> Изготовление рекламы </a></li>
                            <li> <a href="#"> Готовые рекламные товары</a></li>
                        </ul>
                    </li>
                    <li class="headerList1"><span><a href="#">Новости</a></span>
                        <ul class="headerList2">
                            <li> <a href="#"> ПДД </a></li>
                            <li> <a href="#"> Авто Новости </a></li>
                            <li> <a href="#"> Вело Новости </a></li>
                            <li> <a href="#"> Мото Новости </a></li>
                            <li> <a href="#"> Форум</a></li>
                        </ul>
                    </li>
                </ul>
        </div>

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
Body {
    background-color:#000;
    }
 
 
#navBar1{
    width:1040px;
    height:100px;
    float:left;
    outline: 0px solid #cc0000;
    position:relative;
    margin:0 auto;
    
}
 
#new1{
    width:500;
    outline: 0px solid #cccccc;
    position:absolute;
    left:200px; 
    
}
#navBar1 ul ul{
    display:none;
 
}
 
#navBar1 ul {
    padding:0;
    margin:0;
    list-style:none;
 
 
}
 
#navBar1 ul li{
    display:block;
    float:left;
    padding-top:9px;
    padding-bottom:9px;
 
}
#navBar1 ul li span a{
    color:#FFF;
 
}
 
#navBar1 ul li a{
    display:block;
    color:#F00;
    text-decoration:none;
    font-family:Tahoma, Geneva, sans-serif;
    padding-left:30px;
    padding-right:30px;
 
}
 
.headerList2{
    width:1040px;
    height:50px;
    display:block;
    position:absolute;
    top:40px;
    outline: 0px solid #cccccc;
    font-size:15px;
    
    
}
.headerList1{
    outline: 0px solid #cccccc;
    font-size:20px;
    display:table-cell;
    vertical-align:middle;
}
 
#navBar1 ul li a:hover{ 
    color:#F00;
    text-decoration:none;
 
}
 
#navBar1 ul ul{
    width:1040px;
    display:none;
 
}
 
#navBar1 ul li:hover ul{
    position:absolute;
    left:-200px;
    display:block;
 
}
 
#navBar1 ul ul li{
    padding:0;
    padding-top:3px;
    padding-bottom:2px;
 
}
#navBar1 ul ul li a{
    border:none;
    color:#FFF;
 
}

@necro · 20.01.2012, 13:00

Комментарий модератора

Не отсылайте поситителей в поисковые системы.

@Just_al · 20.01.2012, 13:03 **[ТС]**

Я уже загуглился. всё не то что надо...

@necro · 20.01.2012, 13:06

CSS
1
text-align:center;

уже не вариант?
Насчет, чтоб оставалось пока не нажмешь на другой раздел найдите сайт с подобным и посмотрите как там реализовано, но по-моему с помощью одного css это не сделаешь.

@Just_al · 20.01.2012, 13:07 **[ТС]**

text-align:center не помогает!

@necro · 20.01.2012, 13:09

я не понял по центру чего? по центру экрана? И вообще какая-то странная реализация.

@conformist · 20.01.2012, 13:14

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

кликабельно

а че, по первой же ссылке отличнейшее меню, просто свое вписал и готово )

@Just_al · 20.01.2012, 13:15 **[ТС]**

по центру блока. т.е. есть блок в который отображается всегда "авто","вело", "Мото" и т.д.
И хочу сделать чтоб при наведении мышки например на раздел "авто" появлялся другой блок (выпадающие меню). Это у меня получилось, но нужно чтоб текст в выпадающем меню был сцентрован по центру а не по левому краю как сейчас. и желательно чтоб выпадающие меню не исчезало пока не нажмешь на другой раздел. Я уже всё перепробовал что знаю. и заходил уже на более 100 сайтов. там ничего не помогает. и к сожалению я не нашёл сайт с таким же меню.

@necro · 20.01.2012, 13:16

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

@Just_al · 20.01.2012, 13:18 **[ТС]**

по заданию.

Добавлено через 57 секунд

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

а че, по первой же ссылке отличнейшее меню, просто свое вписал и готово )

оно к сожалению не подходит!

@necro · 20.01.2012, 13:29

абсолюты какие-то непонятные, зачем? Поубирайте их, они там не нужны, потом просто выравняйте содержимое блоков выпадающих с помощью margin как вам надо.

Ну в этом способе правда нужно будет создать для остальных блоков свои классы и для каждого класса поставить нужный отступ.

@Just_al · 20.01.2012, 13:49 **[ТС]**

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

абсолюты какие-то непонятные, зачем? Поубирайте их, они там не нужны, потом просто выравняйте содержимое блоков выпадающих с помощью margin как вам надо.

Как ты это сделал???????

Добавлено через 18 минут
Скинь код пожалуйста!

@Xero201 · 20.01.2012, 16:54

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

кликабельно

меня за такое в свое время по рукам админы били, завидую черной завистью)

Но "menu css" - это сказки из области хороших браузеров, спартанских заказчиков и минимализме, реальность это "menu javascript"

И вот еще небольшая халтура:

HTML5
1
2
3
4
5
6
7
<div class="center_menu">
    <ul>
        <li>Пункт 1</li>
        <li>Пункт 2 (пошире)</li>
        <li>П3</li>
    </ul>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
.center_menu{
    margin:0 auto;
    min-width:70%;
    max-width:90%;
}
 
.center_menu ul {
    text-align:center;
}
.center_menu ul li{
    display:inline;
    margin:0 5px
}

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .

@Just_al 0 / 0 / 0 Регистрация: 20.01.2012 Сообщений: 11
	20.01.2012, 13:03 [ТС]
	Я уже загуглился. всё не то что надо... 0

@Just_al 0 / 0 / 0 Регистрация: 20.01.2012 Сообщений: 11
	20.01.2012, 13:07 [ТС]
	text-align:center не помогает! 0

@necro 36 / 36 / 3 Регистрация: 26.09.2009 Сообщений: 298
	20.01.2012, 13:09
	я не понял по центру чего? по центру экрана? И вообще какая-то странная реализация. 0

@Just_al 0 / 0 / 0 Регистрация: 20.01.2012 Сообщений: 11
	20.01.2012, 13:15 [ТС]
	по центру блока. т.е. есть блок в который отображается всегда "авто","вело", "Мото" и т.д. И хочу сделать чтоб при наведении мышки например на раздел "авто" появлялся другой блок (выпадающие меню). Это у меня получилось, но нужно чтоб текст в выпадающем меню был сцентрован по центру а не по левому краю как сейчас. и желательно чтоб выпадающие меню не исчезало пока не нажмешь на другой раздел. Я уже всё перепробовал что знаю. и заходил уже на более 100 сайтов. там ничего не помогает. и к сожалению я не нашёл сайт с таким же меню. 0

@necro 36 / 36 / 3 Регистрация: 26.09.2009 Сообщений: 298
	20.01.2012, 13:16
	У него вообще реализация провал полнейший в плане красоты что ли, если такое условие было по заданию, то ладно, если же для себя, то я бы переделал. 0

@necro 36 / 36 / 3 Регистрация: 26.09.2009 Сообщений: 298
	20.01.2012, 13:29
	абсолюты какие-то непонятные, зачем? Поубирайте их, они там не нужны, потом просто выравняйте содержимое блоков выпадающих с помощью margin как вам надо. Ну в этом способе правда нужно будет создать для остальных блоков свои классы и для каждого класса поставить нужный отступ. 0