Выпадающее меню css по центру

@Sampler · Регистрация: 11.11.2012

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

Здравствуйте.
Помогите, пожалуйста.
Не получается сделать выпадающее меню по центру.

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
#nav{
    float:left;
    width:100%;
    list-style:none;
    margin-bottom:10px;
    white-space:nowrap;
    position:relative;
    margin:0 auto;
}
#nav li{
    float:left;
    margin-right:10px;
    position:relative;
    display:block;
}
#nav li a{
    display:block;
    padding:5px;
    text-decoration:none;
    
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    border-radius:2px;
}
#nav li a:hover{
    color:#fff;
    background:#6b0c36;
    background:rgba(107,12,54,0.75); /* Выглядит полупрозрачным */
    text-decoration:underline;
}
 
/*--- ВЫПАДАЮЩИЕ ПУНКТЫ ---*/
#nav ul{
    list-style:none;
    position:absolute;
    left:-9999px; /* Скрываем за экраном, когда не нужно (данный метод лучше, чем display:none;) */
    opacity:0; /* Устанавливаем начальное состояние прозрачности */
    -webkit-transition:0.25s linear opacity; /* В Webkit выпадающие пункты будут проявляться */
}
#nav ul li{
    padding-top:1px; /* Вводим отступ между li чтобы создать иллюзию разделенных пунктов меню */
    float:none;
    background:url(dot.gif);
}
#nav ul a{
    white-space:nowrap; /* Останавливаем перенос текста и создаем многострочный выпадающий пункт */
    display:block;
}
#nav li:hover ul{ /* Выводим выпадающий пункт при наведении курсора */
    left:0; /* Приносим его обратно на экран, когда нужно */
    opacity:1; /* Делаем непрозрачным */
}
#nav li:hover a{ /* Устанавливаем стили для верхнего уровня, когда выводится выпадающий список */
    background:#6b0c36;
    background:rgba(107,12,54,0.75); /* Выглядит полупрозрачным */
    text-decoration:underline;
}
#nav li:hover ul a{ /* Изменяем некоторые стили верхнего уровня при выводе выпадающего пункта */
    text-decoration:none;
    -webkit-transition:-webkit-transform 0.075s linear;
}
#nav li:hover ul li a:hover{ /* Устанавливаем стили для выпадающих пунктов, когда курсор наводится на конкретный пункт */
    background:#333;
    background:rgba(51,51,51,0.75); /* Будет полупрозрачным */
    text-decoration:underline;
    -moz-transform:scale(1.05);
    -webkit-transform:scale(1.05);
}

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<ul id="nav">
 <li>
 <a class="direct-link" href="/">Ссылка 1</a>
 </li>
 
    <li>
        <a href="#">Ссылка 2</a>
        <ul>
                 <li><a href="/">Ссылка1</a></li>
                 <li><a href="/">Ссылка2</a></li>
        </ul>
    </li>
   <li>
 <a href="https://vk.com" target="_blank">Ссылка 3</a>
 </li>
</ul>

@Padimanskas · 11.10.2015, 21:32

Sampler, Для интерфейса <nav>, <section>, flexbox и т.п.

@Вовчек · 11.10.2015, 21:47

По центру чего?

@Padimanskas · 11.10.2015, 21:51

Сообщение от Вовчек

По центру чего?

В центре космоса, очевидно

@maxon-by · 12.10.2015, 03:50

Держи!!!
Просто добавь это в свои стили
и по...й посреди чего (эт я про ответы лохопутов сверху....)

CSS
1
2
3
4
#nav{
    display: table;
    margin: 0 auto;
}

Удачи

Добавлено через 12 минут
А если хочешь менять расположение подменю, тогда по возможности присваеваешь класс вложеному ul и двигаешь его либо с помощью margin , либо с помощью position:relative (см.мануал - позиционирование).

@Sampler · 23.10.2015, 20:51 **[ТС]**

Сообщение от Вовчек

По центру чего?

по центру веб странички.

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

В центре космоса, очевидно

ха ха.

maxon-by, спасибо, но ваш совет не помог(

@Вовчек · 23.10.2015, 21:47

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

спасибо, но ваш совет не помог(

это потому, что у Вас

CSS
1
#nav{width:100%;}

стоит. уберите ширину, поставьте стили, как maxon-by написал и меню по центру встанет.

@maxon-by · 24.10.2015, 00:16

Sampler, я чуть со стула не упал, когда прочитал, что это не помогло....

Вовчек, спасибо за поддержку!

@Sampler · 01.11.2015, 20:10 **[ТС]**

maxon-by, спасибо большое! Врубился!

CSS
1
2
3
4
5
6
7
8
#nav{
    display: table;
    margin: 0 auto;
    list-style:none;
    margin-bottom:10px;
    white-space:nowrap;
    position:relative;
}

Новые блоги и статьи Все статьи Все блоги /
Конвертировать закладки 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. На борту пять. . .	Символьное дифференцирование igorrr37 13.02.2026 / * Программа принимает математическое выражение в виде строки и выдаёт его производную в виде строки и вычисляет значение производной при заданном х Логарифм записывается как: (x-2)log(x^2+2) -. . .	Камера 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. Пошагово создадим проект для загрузки изображения. . .

@Padimanskas Superposition 950 / 615 / 256 Регистрация: 27.10.2013 Сообщений: 2,083
	11.10.2015, 21:32
	Sampler, Для интерфейса <nav>, <section>, flexbox и т.п. 0

@Вовчек 33 / 33 / 28 Регистрация: 04.04.2011 Сообщений: 333
	11.10.2015, 21:47
	По центру чего? 0

@maxon-by 16 / 16 / 5 Регистрация: 06.10.2015 Сообщений: 245
	24.10.2015, 00:16
	Sampler, я чуть со стула не упал, когда прочитал, что это не помогло.... Вовчек, спасибо за поддержку! 1