0 / 0 / 0
Регистрация: 27.12.2019
Сообщений: 18
1

Почему overflow hidden мешает работе выпадающего меню?

21.02.2020, 20:55. Показов 1878. Ответов 2

Author24 — интернет-сервис помощи студентам
У меня выпадающее меню на категории меню "помощь" в шапке. Но так как при масштабировании экрана в окне разработчика у меня сайт ни в какую не встает на 100% ширины экрана, получается как на скрине. ТО я применяю overflow hidden и решаю эту проблему. Но, сейчас это помешало работе выпадающего меню, почему - не понятно.А точнее меню вообще перестало выпадать. Как решить эту проблему?
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
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
    <!-- <link rel="stylesheet" href="css/media.css"> -->
</head>
<body>
    <div class="wrapper">
        <div class="content">
            
            <section class="header_wrap">
                <header class="header">
                    <div class="header__content">
 
                        <div class="header__content-row">
 
                            <div class="content-row_left-main">
                                <div class="row_left-main_name"><a href="#">Главная</a></div>
                            </div>
 
                            <div class="content-row_right-menu">
 
                                <div class="right-menu_first">
                                    <div class="menu_first-name"><a href="#">Доставка</a></div>
                                        <div class="menu_first-name_img">
                                            <img src="../img/header/delivery_header.png" alt="" />
                                        </div>
                                </div>
                                <div class="right-menu_first">
                                    <div class="menu_first-name"><a href="#">Возврат</a></div>
                                        <div class="menu_first-name_img">
                                            <img src="../img/header/header_money_back.png" alt="" />
                                        </div>
                                </div>
                                <div class="right-menu_first">
                                    <div class="menu_first-name">
                                                <nav class="menuu">
                                                    <ul class="menu_list">
                                                        <li>
                                                            <a href="" class="menu_link">Помощь</a>
                                                                <ul class="sub-menu_list">
                                                                    <li>
                                                                        <a href="" class="sub-menu_link">Второй уровень</a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="" class="sub-menu_link">Второй уровень</a>
                                                                    <li>
                                                                        <a href="" class="sub-menu_link">Второй уровень</a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="" class="sub-menu_link">Второй уровень</a>
                                                                    </li>
                                                                </ul>
                                                        </li>
                                                    </ul>
                                                </nav>
                                    </div>
                                        <div class="menu_first-name_img">
                                            <img src="../img/header/header_down_arrow.png" alt="" />
                                        </div>
                                </div>
 
                                <div class="right-menu_second-lang">
                                    <div class="menu_first-name_img">
                                        <img src="../img/header/header_lang_rus.png" alt="" />
                                    </div>
                                    <div class="menu_first-name_img">
                                        <img src="../img/header/header_lang_ukr.png" alt="" />
                                    </div>
                                </div>
 
                                <div class="right-menu_third-basket">
                                    <div class="menu_third-basket_name">
                                            <a href="#">Корзина</a>
                                    </div>
                                        <div class="menu_first-name_img">
                                            <a href="#"><img src="../img/header/header_basket.png" alt="" /></a>
                                        </div>
                                </div>
 
 
                            </div>
                        </div>
                        
                    </div>
                </header>
            </section>
 
    </div>
    </div>
 
 
 
 
 
 
</body> 
</html>
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
/*Обнуление*/
@import 'null.scss';
/*Шрифты*/
@import url('https://fonts.googleapis.com/css?family=Darker+Grotesque:400,500,700,800,900&display=swap');
@font-face {
    scr: url(../fonts/MasterCardDi.ttf);
    font-family: "MasterCardDi";
    font-weight: 400;
}
 
.wrapper{
    /*overflow: hidden;*/
}
/*Header*/
.header__content {
    background-color: #0b8dd6;
    /*padding: 15px 0;*/
}
.header__content-row {
    display: flex;
    padding: 0 15px;
    justify-content: space-between;
    align-items: center;
}
.header__content-row a{
    color: #ffffff;
    font-family: "Darker Grotesque";
    font-size: 20px;
    font-weight: 700;
}
.row_left-main_name {}
.content-row_left-main {}
.content-row_right-menu {
    display: flex;
    padding-left: 100px;
}
.right-menu_first {
    display: flex;
    padding-left: 30px;
    align-items: center;
}
.right-menu_first:after{
    content: '';
    background-color: white;
    width: 1px;
    height: 54px;
 
}
.menu_first-name {
    padding-right: 10px;
}
.menu_first-name_img {
    padding-right: 30px;
}
/*Выпадающее меню*/
.menuu li{
    position: relative;
 
}
 
.sub-menu_list {
    /*display: none;*/
    opacity: 0;
    visibility: hidden;
    min-width: 150px;
    position: absolute;
    top: 13px;
    left: -30px;
    min-width: 165px;
    padding-top: 15px;
    padding-bottom: 10px;
    margin-top: 5px;
    background-color: #0b8dd6;
 
    transition: all 0.8s ease 0s;
 
}
 
.right-menu_first:hover .sub-menu_list{
    opacity: 1;
    visibility: visible;
}
.sub-menu_list>li{
    padding: 10px 0;
}
 
 
.right-menu_second-lang {
    display: flex;
    padding-left: 30px;
    align-items: center;
}
.right-menu_second-lang:after{
    content: '';
    background-color: white;
    width: 1px;
    height: 54px;
}
.right-menu_third-basket {
    display: flex;
    padding-left: 30px;
    align-items: center;
}
.menu_third-basket_name {}
Миниатюры
Почему overflow hidden мешает работе выпадающего меню?  
0
21.02.2020, 20:55
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
21.02.2020, 20:55
Ответы с готовыми решениями:

Горизонтальное меню. Что делает overflow:hidden?
Всем привет! подскажите пожалуйста, что делает overflow: hidden;в этом коде: .two ul { background: #D4E7EE; overflow: hidden; ...

Overflow: hidden
Ну, вот собственно, элементарный код: &lt;table width=&quot;50%&quot;&gt; &lt;tr&gt; &lt;td style=&quot;height: 50px; overflow: hidden;&quot;&gt; в чащах юга жил...

CSS overflow hidden
проблема в том что на сайте siteкогда ставлю overflow hidden облака исчезают полностью а когда убираю есть прокрутка в права тс как...

2
Developer☭
 Аватар для Panda58dev
210 / 112 / 24
Регистрация: 01.02.2019
Сообщений: 507
22.02.2020, 12:28 2
Цитата Сообщение от alexxozerov Посмотреть сообщение
почему - не понятно
Это происходит из-за того, что overflow: hidden; обрезает всё части дочерних элементов, которые выходят за пределы родителя. Можно было бы конечно сделать, что бы при нажатии на кнопку меню это свойство отменялось, но тогда, как Вы уже сказали "меню не будет вставать на все 100%". Больше идей, как это исправить, у меня нет.
0
238 / 161 / 67
Регистрация: 18.06.2016
Сообщений: 509
22.02.2020, 12:51 3
Потому что
CSS
1
overflow: hidden;
скрывает содержимое, которое выходит за пределы блока, которому это свойство задано. Следуя этому правилу можно открыть страничку в инспекторе и посмотреть какую высоту занимает wrapper, и все встанет на свои места.

CSS
1
2
3
4
.wrapper{
    overflow: hidden;
    min-height: 100vh;
}
1
22.02.2020, 12:51
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
22.02.2020, 12:51
Помогаю со студенческими работами здесь

отменить overflow hidden
Доброго времени суток, требуется помощь, сломал голову уже, вот накидал образец существующей верстки &lt;body&gt; &lt;div&gt;...

float + overflow:hidden
Доброго времени суток! Требуется научное объяснение следующей ситуации: когда дочерние элементы имеют свойство float:left, то...

overflow: hidden у обтекающего элемента
Странно работает следующий код: &lt;div class=&quot;float&quot;&gt;LOL&lt;/div&gt; &lt;div class=&quot;floating&quot;&gt;LOL&lt;br&gt;LOL&lt;/div&gt; при следующих стилях: .float...

Overflow:hidden и адаптивная верстка
Всем привет. У меня такая проблемка: 1) на сайте слайдер с инфою о автомобилях; 2) слайдер состоит из 3-х див блоков; 3) 1 блок...

Объясните действие overflow:hidden
Объясните как работает overflow. Столкнулся с проблемой, между навигацией (Тег &quot;nav&quot;) и слайдером появляется белая полоса, пытался...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему

Редактор формул (кликните на картинку в правом углу, чтобы закрыть)
Опции темы

Новые блоги и статьи
Почему могут не шифроваться русские символы в Java
Wired 17.02.2025
При разработке на Java нередко возникают сложности с шифрованием русских символов. Эта проблема особенно актуальна для разработчиков, создающих программное обеспечение для русскоязычной аудитории. . . .
Отличия ОС для x86_64 и ARM
Wired 17.02.2025
На данный момент сосуществуют две основные архитектуры процессоров - x86_64 и ARM. Эти архитектуры имеют принципиально разные подходы к организации вычислений и обработке данных, что накладывает. . .
Многопоточность в Python: как использовать Thread
bytestream 17.02.2025
Поток выполнения (thread) - это наименьшая последовательность инструкций, которая может управляться планировщиком операционной системы. Представьте себе, что ваша программа - это книга, а потоки -. . .
Как воспроизвести Race Condition в Python
bytestream 17.02.2025
В многопоточном программировании существует множество подводных камней, и одним из самых коварных является состояние гонки (Race Condition). Этот термин описывает ситуацию, когда результат выполнения. . .
Ошибка "node: --openssl-legacy-provider is not allowed in NODE_OPTIONS"
bytestream 17.02.2025
Каждый разработчик рано или поздно сталкивается с ситуацией, когда при запуске проекта Node. js неожиданно выскакивает ошибка "node: --openssl-legacy-provider is not allowed in NODE_OPTIONS". Это. . .
Ошибка pip Python "AttributeError­: module 'lib' has no attribute 'OpenSSL_add_al­l_algorit­hms'"
bytestream 17.02.2025
При разработке на Python частенько сталкиваешься с разными сюрпризами, но ошибка AttributeError: module 'lib' has no attribute 'OpenSSL_add_all_algorithms' - это что-то особенное. Знаете, это как. . .
Сообщение Play Store "You must complete the advertising ID declaration before you can release an app that targets"
bytestream 17.02.2025
Рекламный идентификатор - это уникальный, но восстанавливаемый строковый идентификатор для каждого устройства Android. Думаю, вы удивитесь, но даже если ваше приложение не показывает рекламу. . .
Отличия App Router от Pages Router в Next.js
bytestream 17.02.2025
Next. js прошел длинный путь развития, и одним из самых значительных изменений стало появление App Router - революционного подхода к организации маршрутизации в приложении. Этот новый способ пришел на. . .
Топ10 лучших фреймворков JavaScript для изучения в 2025
bytestream 16.02.2025
В современной веб-разработке JavaScript занимает особое место, являясь одним из наиболее востребованных языков программирования. По мере развития веб-технологий появляется все больше фреймворков,. . .
Temporal в JavaScript - новый формат даты и времени
bytestream 16.02.2025
В мире JavaScript скоро произойдет значимое событие - появление нового встроенного объекта Temporal, который призван полностью заменить устаревший объект Date. Это революционное изменение в работе с. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru