Мне нужно доделать выпадающее меню

@Kradmoor · Регистрация: 04.07.2016

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

Хотелось бы сделать так,что-бы выпадающее меню CSS выпадало на слайдер.

Вот сам код HTML:

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
<header id="header">
    <div id="error" align="middle">
    <a href="#"><em class="fa fa-vk"></em></a>
    <a href="#"><em class="fa fa-facebook-square"></em></a>
    <a href="#"><em class="fa fa-instagram"></em></a>
    <a href="#"><em class="fa fa-twitter"></em></a>
    </div>
    <div id="buttons" align="middle">
    <div id="login-registration"><button class="button"><i class="fa fa-users"></i></button><a href="#" class="href">Вход/</a><a href="#" class="href">Регистрация</a></div>
    <div id="number"><button class="button"><i class="fa fa-phone-square"></i></button><a href="#" class="href"></a>
    </div>
    <div id="basket"><button class="button"><i class="fa fa-shopping-cart"></i></button><a href="#" class="href">Корзина</a>
    </div>
    </div>
    <div id="vapeshop"><a href="#"><h2 align="middle">Vape Shop</h2></a></div>
 
<!--Это выпадающее меню-->
    <div class="side">
    <ul class="menu" align="middle">
        <li class="menu_list"><a href="#">МЕНЮ</a><ul class="menu_drop">
            <li><a href="#">Пункт 1</a></li>
            <li><a href="#">Пункт 2</a></li>
            <li><a href="#">Пункт 3</a></li>
            <li><a href="#">Пункт 4</a></li>
            <li><a href="#">Пункт 5</a></li>
        </ul></li>
        <li class="menu_list"><a href="#">МЕНЮ</a><ul class="menu_drop">
            <li><a href="#">Пункт 1</a></li>
            <li><a href="#">Пункт 2</a></li>
            <li><a href="#">Пункт 3</a></li>
            <li><a href="#">Пункт 4</a></li>
            <li><a href="#">Пункт 5</a></li>
        </ul></li>
        <li class="menu_list"><a href="#">МЕНЮ</a><ul class="menu_drop">
            <li><a href="#">Пункт 1</a></li>
            <li><a href="#">Пункт 2</a></li>
            <li><a href="#">Пункт 3</a></li>
            <li><a href="#">Пункт 4</a></li>
            <li><a href="#">Пункт 5</a></li>
        </ul></li>
        <li class="menu_list"><a href="#">МЕНЮ</a><ul class="menu_drop">
            <li><a href="#">Пункт 1</a></li>
            <li><a href="#">Пункт 2</a></li>
            <li><a href="#">Пункт 3</a></li>
            <li><a href="#">Пункт 4</a></li>
            <li><a href="#">Пункт 5</a></li>
        </ul></li>
        <li class="menu_list"><a href="#">МЕНЮ</a><ul class="menu_drop">
            <li><a href="#">Пункт 1</a></li>
            <li><a href="#">Пункт 2</a></li>
            <li><a href="#">Пункт 3</a></li>
            <li><a href="#">Пункт 4</a></li>
            <li><a href="#">Пункт 5</a></li>
        </ul></li>
        <li class="menu_list"><a href="#">МЕНЮ</a><ul class="menu_drop">
            <li><a href="#">Пункт 1</a></li>
            <li><a href="#">Пункт 2</a></li>
            <li><a href="#">Пункт 3</a></li>
            <li><a href="#">Пункт 4</a></li>
            <li><a href="#">Пункт 5</a></li>
        </ul></li>
    </ul>
    </div>
    <div class="clear"></div>
 
<!--Тут слайдер если что-->
    <div class="slider__container">
    <div class="next_button"><i class="fa fa-angle-right" aria-hidden="true"></i></div>
    <div class="prev_button"><i class="fa fa-angle-left" aria-hidden="true"></i></div>
    <div class="carousel">
      <div class="carouselitem"><img src="img/wild.jpg" alt=""></div>
        <div class="carouselitem"><img src="img/amaru.jpg" alt=""></div>
        <div class="carouselitem"><img src="img/chifles.jpg" alt=""></div>
        <div class="carouselitem"><img src="img/tictac.jpg" alt=""></div>
    </div>
    </div>
</header>

КОД Выпадающего меню 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
/*main-menu*/
.side>ul>li{
    display:inline-block;
    font-size:12px;
}
.side{
width:70%;
float:left;
margin:5px;
margin-top:2px;
margin-left:265px;
position:relative;
}
 
.menu{
margin:auto;
padding-right:40px;
 
}
/*style-htef*/
a:link{
    color:black;
}
a:visited{
    color:black;
}
a{
    text-decoration:none;
}
ul{
    margin:0;
    padding:0;
    list-style:none;
}
/*Appearance menu*/
.menu a{
    background:#3d3d3d;
    color:#fff;
    padding:10px;
    display:block;
    border-bottom:1px solid #666;
    transition:0.5s;
}
.menu a:hover{
    background:#666;
    padding:10px 0 10px 5px;
}
/*Pop-up menus*/
.menu_list{
    position:relative;
    width:100px;
}
.menu_drop{
    position:absolute;
    width:100%;
    top:100%;
    left:-9999em;
    opacity:0;
    transition:0.5s opacity;
    border-top:3px solid transparent;
}
.menu_list:hover .menu_drop{
    opacity:1;
    left:0;
    position: absolute;
}
/*menu Icons*/
.menu_list::after{
    content: "";
    position: absolute;
    border:3px solid;
    border-color:#eee transparent transparent transparent;
    top:2.5em;
    left:4em;
    transition:0.5s;
}
.menu_list:hover::after{
    transform:scaley(-1);
}
 
КОД CSS Слайдера:
 
/*slider__container*/
.slider__container img{
    max-width:100%;
    position:relative;
}
.slider__container{
  position:relative;
}
/*slide_button*/
.next_button,.prev_button{
    cursor:pointer;
    color:black;
    font-size:46px;
    position:absolute;
    top:40%;
    z-index:10;
}
.next_button{
    right:20px;
}
.prev_button{
    left:20px;
}

Что тут не так? Как мне сделать так что бы выпадающее меню,выпадало на сам Slider?

@ntlinuxnt · 04.07.2016, 17:25

А как оно сейчас выпадает?

@Kradmoor · 04.07.2016, 20:22 **[ТС]**

На данный момент выпадает меню в низ.Слайдер закрывает все пункты...

@Kradmoor · 04.07.2016, 20:26 **[ТС]**

Вот сами картинки моей проблемы.

@boilzzz · 04.07.2016, 21:11

Kradmoor, решения 2, либо задать слайдеру

CSS
1
z-index

меньше
либо задать меню

CSS
1
z-index

больше

Пробуйте решение тык

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
<!--Это выпадающее меню-->
    <div class="side">
    <ul class="menu" align="middle">
        <li class="menu_list"><a href="#">МЕНЮ</a><ul class="menu_drop">
            <li><a href="#">Пункт 1</a></li>
            <li><a href="#">Пункт 2</a></li>
            <li><a href="#">Пункт 3</a></li>
            <li><a href="#">Пункт 4</a></li>
            <li><a href="#">Пункт 5</a></li>
        </ul></li>
        <li class="menu_list"><a href="#">МЕНЮ</a><ul class="menu_drop">
            <li><a href="#">Пункт 1</a></li>
            <li><a href="#">Пункт 2</a></li>
            <li><a href="#">Пункт 3</a></li>
            <li><a href="#">Пункт 4</a></li>
            <li><a href="#">Пункт 5</a></li>
        </ul></li>
        <li class="menu_list"><a href="#">МЕНЮ</a><ul class="menu_drop">
            <li><a href="#">Пункт 1</a></li>
            <li><a href="#">Пункт 2</a></li>
            <li><a href="#">Пункт 3</a></li>
            <li><a href="#">Пункт 4</a></li>
            <li><a href="#">Пункт 5</a></li>
        </ul></li>
        <li class="menu_list"><a href="#">МЕНЮ</a><ul class="menu_drop">
            <li><a href="#">Пункт 1</a></li>
            <li><a href="#">Пункт 2</a></li>
            <li><a href="#">Пункт 3</a></li>
            <li><a href="#">Пункт 4</a></li>
            <li><a href="#">Пункт 5</a></li>
        </ul></li>
        <li class="menu_list"><a href="#">МЕНЮ</a><ul class="menu_drop">
            <li><a href="#">Пункт 1</a></li>
            <li><a href="#">Пункт 2</a></li>
            <li><a href="#">Пункт 3</a></li>
            <li><a href="#">Пункт 4</a></li>
            <li><a href="#">Пункт 5</a></li>
        </ul></li>
        <li class="menu_list"><a href="#">МЕНЮ</a><ul class="menu_drop">
            <li><a href="#">Пункт 1</a></li>
            <li><a href="#">Пункт 2</a></li>
            <li><a href="#">Пункт 3</a></li>
            <li><a href="#">Пункт 4</a></li>
            <li><a href="#">Пункт 5</a></li>
        </ul></li>
    </ul>
    </div>
    <div class="clear"></div>
 
<!--Тут слайдер если что-->
    <div class="slider__container">
    <div class="next_button"><i class="fa fa-angle-right" aria-hidden="true"></i></div>
    <div class="prev_button"><i class="fa fa-angle-left" aria-hidden="true"></i></div>
    <div class="carousel">
      <div class="carouselitem"><img src="img/wild.jpg" alt=""></div>
        <div class="carouselitem"><img src="img/amaru.jpg" alt=""></div>
        <div class="carouselitem"><img src="img/chifles.jpg" alt=""></div>
        <div class="carouselitem"><img src="img/tictac.jpg" alt=""></div>
    </div>
    </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
.side>ul>li{
    display:inline-block;
    font-size:12px;
}
.side{
margin:5px;
margin-top:2px;
position:relative;
}
 
.menu{
margin:auto;
padding-right:40px;
 
}
/*style-htef*/
a:link{
    color:black;
}
a:visited{
    color:black;
}
a{
    text-decoration:none;
}
ul{
    margin:0;
    padding:0;
    list-style:none;
}
/*Appearance menu*/
.menu a{
    background:#3d3d3d;
    color:#fff;
    padding:10px;
    display:block;
    border-bottom:1px solid #666;
    transition:0.5s;
}
.menu a:hover{
    background:#666;
    padding:10px 0 10px 5px;
}
/*Pop-up menus*/
.menu_list{
    position:relative;
    width:100px;
}
.menu_drop{
    position:absolute;
    width:100%;
    top:100%;
    left:-9999em;
    opacity:0;
    transition:0.5s opacity;
    border-top:3px solid transparent;
}
.menu_list:hover .menu_drop{
    opacity:1;
    left:0;
    position: absolute;
}
/*menu Icons*/
.menu_list::after{
    content: "";
    position: absolute;
    border:3px solid;
    border-color:#eee transparent transparent transparent;
    top:2.5em;
    left:4em;
    transition:0.5s;
}
.menu_list:hover::after{
    transform:scaley(-1);
}
  
/*slider__container*/
.slider__container img{
    max-width:100%;
    position:relative;
}
.slider__container{
  position:relative;
  z-index:-1;
}
/*slide_button*/
.next_button,.prev_button{
    cursor:pointer;
    color:black;
    font-size:46px;
    position:absolute;
    top:40%;
    z-index:10;
}
.next_button{
    right:20px;
}
.prev_button{
    left:20px;
}

@Kradmoor · 04.07.2016, 22:09 **[ТС]**

Слушай,спасибо тебе большое,а я с position что-то пытался сделать.Ты мне очень помог!

Добавлено через 2 минуты
Прошу модераторов закрыть эту тему.

Новые блоги и статьи Все статьи Все блоги /
Midnight Chicago Blues kumehtar 24.03.2026 Такой Midnight Chicago Blues, знаешь?. . Когда вечерние улицы становятся ночными, а ты не можешь уснуть. Ты идёшь в любимый старый бар, и бармен наливает тебе виски. Ты смотришь на пролетающие. . .	Контроль уникальности заводского номера - вариант №2 Maks 24.03.2026 В отличие от предыдущего варианта добавлено прерывание циклов, также добавлены новые переменные для сохранения контекста ошибки перед прерыванием цикла: Процедура ПередЗаписью(Отказ, РежимЗаписи,. . .	SDL3 для Desktop (MinGW): Вывод текста со шрифтом TTF с помощью библиотеки SDL3_ttf на Си и C++ 8Observer8 24.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-text-sdl3-c. zip finish-text-sdl3-cpp. zip	Жизнь в неопределённости kumehtar 23.03.2026 Жизнь — это постоянное существование в неопределённости. Например, даже если у тебя есть список дел, невозможно дойти до точки, где всё окончательно завершено и больше ничего не осталось. В принципе,. . .
Модель здравоСохранения: работники работают быстрее после её введения. anaschu 23.03.2026 geJalZw1fLo Корпорация до введения программа здравоохранения имела много невыполненных работниками заданий, после введения программы количество заданий выросло. Но на выплатах по больничным это. . .	Контроль уникальности заводского номера - вариант №1 Maks 23.03.2026 Алгоритм контроля уникальности заводского (или серийного) номера на примере документа выдачи шин для спецтехники с табличной частью. Данные берутся из регистра сведений, по которому настроено. . .	Хочу заставить корпорации вкладываться в здоровье сотрудников: делаю мат модель здравосохранения anaschu 22.03.2026 e7EYtONaj8Y Z4Tv2zpXVVo https:/ / github. com/ shumilovas/ med2. git	Программный отбор элементов справочника по группе Maks 22.03.2026 Установка программного отбора элементов справочника "Номенклатура" из модуля формы документа. В качестве фильтра для отбора справочника служит группа номенклатуры. Отбор по наименованию группы. . .

@ntlinuxnt $ su 1605 / 520 / 97 Регистрация: 18.11.2010 Сообщений: 2,807 Записей в блоге: 2
	04.07.2016, 17:25
	А как оно сейчас выпадает? 0

@Kradmoor 0 / 0 / 0 Регистрация: 04.07.2016 Сообщений: 4
	04.07.2016, 20:22 [ТС]
	На данный момент выпадает меню в низ.Слайдер закрывает все пункты... 0

@Kradmoor 0 / 0 / 0 Регистрация: 04.07.2016 Сообщений: 4
	04.07.2016, 20:26 [ТС]
	Вот сами картинки моей проблемы. Миниатюры 0

@Kradmoor 0 / 0 / 0 Регистрация: 04.07.2016 Сообщений: 4
	04.07.2016, 22:09 [ТС]
	Слушай,спасибо тебе большое,а я с position что-то пытался сделать.Ты мне очень помог! Добавлено через 2 минуты Прошу модераторов закрыть эту тему. 0

Мне нужно доделать выпадающее меню

Решение