Выпадающий список

@Ураган · Регистрация: 12.10.2012

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

Как выпадающий список развернуть в другую сторону? Нужно чтобы он выпадал в другую сторону и развернут на 90 градусов. Спасибо.

Есть код

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<link rel="stylesheet" type="text/css" href="noviy.css">
 
<ul class="menu">
   <li class="menu-item">
      <a href="#">Пункт меню 1</a>
      <ul class="sub-menu">
         <li>
            <a href="#">Подпункт меню 1</a>
         </li>
         <li>
            <a href="#">Подпункт меню 2</a>
         </li>
      <li>
            <a href="#">Подпункт меню 3</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
    .menu {
    -webkit-transform: rotate(-90deg);  /*Поворот блока с текстом кнопки  на 30 градусов*/
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    position:fixed; /*фиксированная позиция кнопки при прокрутке*/
    z-index:999;
    right: 0px; /*отступ с права*/
    top: 35%; /*отступ сверху*/
    margin-right:-50px; /*отрицательный отступ справа (чем длиннее название кнопки тем больше должно быть значение данного отступа )*/
}
    
    
    .menu li{
        
        position: relative;
        display: inline-block;
        background: #777;
        list-style: none;
        padding: 2px 4px;
        margin: 2px;
    }
    .menu a{
        color: #fff;
        font-family: Arial;
        text-decoration: none;
    }
    .menu li ul{
        
        transform: translateX(50%);
        visibility: hidden;
        opacity: 0;
        position: absolute;
        top: 100%;
        left: 0;
        border: 1px solid #777;
        margin: 0;
       padding: 0;
        /*transition: visibility 0.5s, opacity 0.5s;*/
    }
    .menu li:hover ul{
        visibility: visible;
        opacity: 1;
 
    }
    .menu li li {
        
        display: block;
        white-space: nowrap;
    }

@Smls · 05.04.2018, 19:11

В другую это в какую? Нарисуй хоть как должно выглядеть. Если просто на 180 градусов повернуть то что сейчас есть, поменяй rotate(-90deg) на rotate(90deg)

@Ураган · 06.04.2018, 10:54 **[ТС]**

Smls, Как то так

@Smls · 06.04.2018, 11:32

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
    .menu li ul{
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
      transform: rotate(90deg);
        visibility: hidden;
        opacity: 0;
        position: absolute;
        bottom: 4em;
        border: 1px solid #777;
        margin: 0;
       padding: 0;
   transition: visibility 2s;
}

@Ураган · 06.04.2018, 11:57 **[ТС]**

Smls, че то не срабатывает ничего

Добавлено через 6 минут
Smls,
Сделал так но не успеваю мышку навести на подменю, как можно прозрачный блок сделать который не давал бы закрываться подменю.

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
    .menu {
    -webkit-transform: rotate(90deg);  /*Поворот блока с текстом кнопки  на 30 градусов*/
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    position:fixed; /*фиксированная позиция кнопки при прокрутке*/
    z-index:999;
    right: 0px; /*отступ с права*/
    top: 35%; /*отступ сверху*/
    margin-right:-50px; /*отрицательный отступ справа (чем длиннее название кнопки тем больше должно быть значение данного отступа )*/
}
    
    
    .menu li{
        
        position: relative;
        display: inline-block;
        background: #777;
        list-style: none;
        padding: 2px 4px;
        margin: 2px;
    }
    .menu a{
        color: #fff;
        font-family: Arial;
        text-decoration: none;
    }
    .menu li ul{
        transform: rotate(-90deg);
        position:fixed; /*фиксированная позиция кнопки при прокрутке*/
        visibility: hidden;
        opacity: 0;
        top: 70px;
        right: 0;
        left: 0px;
        border: 1px solid #777;
        padding: 0px;
        /*transition: visibility 0.5s, opacity 0.5s;*/
    }
    .menu li:hover ul{
        visibility: visible;
        opacity: 1;
 
    }
    .menu li li {
        
        display: block;
        white-space: nowrap;
    }

@Smls · 06.04.2018, 14:56

В моём варианте присутствовало: transition: visibility 2s;

@Ураган · 06.04.2018, 14:59 **[ТС]**

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

@Smls · 06.04.2018, 15:06

У меня не пропадает: https://codepen.io/Samail/pen/qoJLMV

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
    .menu {
    -webkit-transform: rotate(-90deg);  /*Поворот блока с текстом кнопки  на 30 градусов*/
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    position:fixed; /*фиксированная позиция кнопки при прокрутке*/
    z-index:999;
    right: 0px; /*отступ с права*/
    top: 35%; /*отступ сверху*/
    margin-right:-50px; /*отрицательный отступ справа (чем длиннее название кнопки тем больше должно быть значение данного отступа )*/
}
     .menu li{
        
        position: relative;
        display: inline-block;
        background: #777;
        list-style: none;
        padding: 2px 4px;
        margin: 2px;
    }
    .menu a{
        color: #fff;
        font-family: Arial;
        text-decoration: none;
    }
    .menu li ul{
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
      transform: rotate(90deg);
        visibility: hidden;
        position: absolute;
        bottom: 4em;
        border: 1px solid #777;
        margin: 0;
       padding: 0;
   transition: visibility 1s;
}
    .menu li:hover ul{
        visibility: visible;
        opacity: 1;
    }
    .menu li li {
        display: block;
        white-space: nowrap;
    }

@Ураган · 06.04.2018, 15:13 **[ТС]**

Smls, спасибо, я вообще пытаюсь сделать такую менюшку как тут я в правильном направлении двигаюсь?

@Smls · 06.04.2018, 15:37

Так можно прямо там код и скопировать

@Ураган · 06.04.2018, 15:44 **[ТС]**

Smls, ну вот я не вижу что копировать там надо, там все налеплено как то, непонятно. Отсюда копировать?

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование 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. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@Smls 220 / 173 / 115 Регистрация: 19.01.2015 Сообщений: 524
	05.04.2018, 19:11
	В другую это в какую? Нарисуй хоть как должно выглядеть. Если просто на 180 градусов повернуть то что сейчас есть, поменяй rotate(-90deg) на rotate(90deg) 0

@Ураган 3 / 3 / 1 Регистрация: 12.10.2012 Сообщений: 72
	06.04.2018, 10:54 [ТС]
	Smls, Как то так Миниатюры 0

@Smls 220 / 173 / 115 Регистрация: 19.01.2015 Сообщений: 524
	06.04.2018, 14:56
	В моём варианте присутствовало: transition: visibility 2s; 0

@Ураган 3 / 3 / 1 Регистрация: 12.10.2012 Сообщений: 72
	06.04.2018, 14:59 [ТС]
	Smls, я пробовал и так, но как только ведешь мышку до подменю, подменю уже пропадает. 0

@Ураган 3 / 3 / 1 Регистрация: 12.10.2012 Сообщений: 72
	06.04.2018, 15:13 [ТС]
	Smls, спасибо, я вообще пытаюсь сделать такую менюшку как тут я в правильном направлении двигаюсь? 0

@Smls 220 / 173 / 115 Регистрация: 19.01.2015 Сообщений: 524
	06.04.2018, 15:37
	Так можно прямо там код и скопировать 0

@Ураган 3 / 3 / 1 Регистрация: 12.10.2012 Сообщений: 72
	06.04.2018, 15:44 [ТС]
	Smls, ну вот я не вижу что копировать там надо, там все налеплено как то, непонятно. Отсюда копировать? Миниатюры 0