Что поменять в горизонтальном меню.что бы оно стало вертикальным?

@inquisitor · Регистрация: 22.12.2015

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

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
65
66
67
68
69
70
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Горизонтальное выпадающее меню</title>
    <style>
      #navbar ul{
       display: none;
        background-color: #33ADFF;
        position: absolute;
        top: 100%;
      }
      #navbar li:hover ul { display: block; }
      #navbar, #navbar ul{
        margin: 0;
        padding: 0;
        list-style-type: none;
      }
      #navbar {
        height: 30px;
        background-color: #33ADFF;
         text-align: center;
        width:470px;
         border: 2px solid #0066FF;
        border-radius: 20px 5px;
      }
      #navbar li {
        float: left;
        position: relative;
        height: 100%;
      }
      #navbar li a {
        display: block; 
        padding: 6px;
        width: 100px;
        color: #fff;
        text-decoration: none;
        text-align: center;
      }
      #navbar ul li { float: none; }
     
     #navbar li:hover { 
      background-color: #0066FF; 
       border-radius: 20px 5px;
      }
      #navbar ul li:hover { 
      background-color: #0066FF; 
      }
    </style>
  </head>
 
  <body>
  
    <ul id="navbar">
      <li><a href="#">Главная</a></li>
      <li><a href="#">Новости</a></li>
      <li><a href="#">Контакты</a>
        <ul>
          <li><a href="#">Адрес</a></li>
          <li><a href="#">Телефон</a></li>
          <li><a href="#">Email</a></li>
        </ul>
      </li>
      <li><a href="#">О нас</a></li>
    </ul>
 
  
 
  </body>
</html>

@SergioSup · 02.12.2017, 21:48

у #navbar убери высоту.
у #navbar li убери флоат.

@inquisitor · 02.12.2017, 21:56 **[ТС]**

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

у #navbar убери высоту.
у #navbar li убери флоат.

убрал область меню стала вся белой.
Исчезло выпадающее меню,там где адрес и тел.

@AlexZaw · 02.12.2017, 22:01

как то так

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
 #navbar ul{
       display: none;
        background-color: #33ADFF;
        position: absolute;
        top: 100%;
      }
      #navbar li:hover ul { display: block; }
      #navbar, #navbar ul{
        margin: 0;
        padding: 0;
        list-style-type: none;
      }
      #navbar {
        /* height: 30px; */
        background-color: #33ADFF;
         text-align: center;
        width:470px;
         border: 2px solid #0066FF;
        border-radius: 20px 5px;
      }
      #navbar:after{
        content: '';
        display:table;
        clear: both;
      }
      #navbar li {
      float: left;
        position: relative;
        height: 100%;
      }
      #navbar li a {
        display: block; 
        padding: 6px;
        width: 100px;
        color: #fff;
        text-decoration: none;
        text-align: center;
      }
      #navbar ul li { float: none; }
     
     #navbar li:hover { 
      background-color: #0066FF; 
       border-radius: 20px 5px;
      }
      #navbar ul li:hover { 
      background-color: #0066FF; 
      }
       @media screen and (max-width:600px){
              #navbar li {
      float: none;}
       #navbar ul{
         left:100px;
       }
       }

@inquisitor · 02.12.2017, 22:40 **[ТС]**

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

как то так

Не получаеться навести курсором мыши на меню второго уровня(выпадающее) на медиаскрине.

@AlexZaw · 02.12.2017, 23:49

в медиа запрос для #navbar ul добавьте z-index:1

@inquisitor · 03.12.2017, 00:12 **[ТС]**

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

в медиа запрос для

Добавил,меню стало вертикальным нужной формы и цвета.Но навести курсор мыши на вложенное выпадающее меню не возможно оно исчезает когда увести курсор с пункта "Контакты".Да и хотелось бы,что оно выезало вправо,а не вниз.

@AlexZaw · 03.12.2017, 00:41

Почему у вас никогда ничего не работает? Куда вы добавили z-index?

CSS
1
2
3
4
5
6
7
8
      @media screen and (max-width:600px){
              #navbar li {
      float: none;}
       #navbar ul{
         left:100px;
         z-index: 1;
       }
       }

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

Да и хотелось бы,что оно выезало вправо,а не вниз.

Это как? В одну с контактами? Ну сделайте ему тот-же флоат например и попраьте позиционирование

@inquisitor · 03.12.2017, 00:53 **[ТС]**

CSS
1
2
3
4
5
6
7
8
9
10
11
12
 @media screen and (max-width:600px)
       {
              #navbar li {
                        float: none;}
 
 
               #navbar ul{
                 left:100px;
                 z-index:1
               }
    
       }

Так я и сделал.

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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Вертикальное выпадающее меню с горизонтального</title>
    <style>
 
 #navbar ul{
       display: none;
        background-color: #33ADFF;
        position: absolute;
        top: 100%;
      }
      #navbar li:hover ul { display: block; }
      #navbar, #navbar ul{
        margin: 0;
        padding: 0;
        list-style-type: none;
      }
      #navbar {
        /* height: 30px; */
        background-color: #33ADFF;
         text-align: center;
        width:470px;
         borsolid #0066FF;
        borderder: 2px -radius: 20px 5px;
      }
      #navbar:after{
        content: '';
        display:table;
        clear: both;
      }
      #navbar li {
      float: left;
        position: relative;
        height: 100%;
      }
      #navbar li a {
        display: block; 
        padding: 6px;
        width: 100px;
        color: #fff;
        text-decoration: none;
        text-align: center;
      }
      #navbar ul li { float: none; }
     
     #navbar li:hover { 
      background-color: #0066FF; 
       border-radius: 20px 5px;
      }
      #navbar ul li:hover { 
      background-color: #0066FF; 
      }
       @media screen and (max-width:600px)
       {
              #navbar li {
                        float: none;}
               #navbar ul{
                 left:100px;
                 z-index:1
               }
    
       } 
       
 
    </style>
  </head>
 
  <body>
  
    <ul id="navbar">
      <li><a href="#">Главная</a></li>
      <li><a href="#">Новости</a></li>
      <li><a href="#">Контакты</a>
        <ul>
          <li><a href="#">Адрес</a></li>
          <li><a href="#">Телефон</a></li>
          <li><a href="#">Email</a></li>
        </ul>
      </li>
      <li><a href="#">О нас</a></li>
    </ul>
 
  
 
  </body>
</html>

Добавлено через 3 минуты

CSS
1
2
3
4
5
6
7
8
9
10
#navbar ul
{ display: none; background-color: #33ADFF;
position: relative; left: 120px; top:-30px;
}
#navbar
{ width:120px; text-align: center;
border: 2px solid #0066FF; border-radius: 20px 5px;background-color: #33ADFF;
}
#navbar li
{ height:30px; position: relative; overflow:visible; }

или вот так

Добавлено через 3 минуты
Работает но нужно очень быстро курсор мыши перевести с пункта контакты на адрес иначе оно пропадает.Как замедлить его исчезновение?

@AlexZaw · 03.12.2017, 00:59

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

Второй кусок css это к чему?

@inquisitor · 03.12.2017, 01:01 **[ТС]**

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

Второй кусок 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
#navbar ul{
       display: none;
        background-color: #33ADFF;
        position: absolute;
        top: 100%;
      }
      #navbar li:hover ul { display: block; }
      #navbar, #navbar ul{
        margin: 0;
        padding: 0;
        list-style-type: none;
      }
      #navbar {
        /* height: 30px; */
        background-color: #33ADFF;
         text-align: center;
        width:470px;
         borsolid #0066FF;
        borderder: 2px -radius: 20px 5px;
      }
      #navbar:after{
        content: '';
        display:table;
        clear: both;
      }
      #navbar li {
      float: left;
        position: relative;
        height: 100%;
      }
      #navbar li a {
        display: block; 
        padding: 6px;
        width: 100px;
        color: #fff;
        text-decoration: none;
        text-align: center;
      }
      #navbar ul li { float: none; }
     
     #navbar li:hover { 
      background-color: #0066FF; 
       border-radius: 20px 5px;
      }
      #navbar ul li:hover { 
      background-color: #0066FF; 
      }
       @media screen and (max-width:600px)
       {
              #navbar li {
                        float: none;}
               #navbar ul{
                 left:100px;
                 z-index:1
               }
    
       }

и вместо него альтернативный маленький кусочек и так само работает.

@AlexZaw · 03.12.2017, 01:02

вот песочница с вашим кодом, https://jsfiddle.net/AlexZaw/0c81La79/
все работает нормально

@AlexZaw · 03.12.2017, 01:05

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

и вместо него альтернативный маленький кусочек и так само работает.

вот что получается с вашим альтернативным кусочком кода
Название: Screenshot_1.png
Просмотров: 30

Размер: 2.9 Кб

как это может работать?

Новые блоги и статьи Все статьи Все блоги /
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .

@SergioSup 84 / 81 / 42 Регистрация: 20.01.2017 Сообщений: 219
	02.12.2017, 21:48
	у `#navbar` убери высоту. у `#navbar li` убери флоат. 0

@AlexZaw Модератор 2379 / 1739 / 677 Регистрация: 07.08.2016 Сообщений: 4,093
	02.12.2017, 23:49
	в медиа запрос для #navbar ul добавьте `z-index:1` 0

@AlexZaw Модератор 2379 / 1739 / 677 Регистрация: 07.08.2016 Сообщений: 4,093
	03.12.2017, 00:59
	У меня с вашим же кодом все работает, оба уровня меню открываются и курсор переводится на второй уровень нормально. Второй кусок css это к чему? 0

@AlexZaw Модератор 2379 / 1739 / 677 Регистрация: 07.08.2016 Сообщений: 4,093
	03.12.2017, 01:02
	вот песочница с вашим кодом, https://jsfiddle.net/AlexZaw/0c81La79/ все работает нормально 0