Когда я добавляю переполнение: скрыто, мои раскрывающиеся списки перестают работать

Я работаю над персональным новостным веб-сайтом, имя которого News pews. Это мой третий проект, и в другом проекте у меня не было такой проблемы.

на моей странице есть прокрутка x, и когда я хочу удалить ее с помощью overflow: hidden;, она работает, но мои раскрывающиеся списки отключены, и я пробовал много других кодов, но ни один из них не работал.

это код (я пишу эти коды как можно короче только для этого вопроса):

вам нужно открыть этот фрагмент на полной странице, чтобы увидеть раскрывающийся список (кнопка на всю страницу находится в конце фрагмента).

*{
    margin: 0;
    padding: 0;
    
}

body{
    /* overflow: hidden; */
    background-color: rgb(244, 242, 242);   
}

.the_bg_red{
    background-color: #EF233C;
}
.the_txt_red{
    color: #EF233C;
}
ul{
    list-style-type: none;
}

nav{
    height: 90px;
}

.menus{
    list-style-type: none;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}
.menus li{
    margin-left: 50px;
    margin-top: 10px;
    cursor: pointer;
}
.menus a{
    text-decoration: none;
    color: white;
}
/* ---------------li main---------- */
.li_main{
    position: relative;
}
.submenu_main{
    background-color: white;
    height: auto;
    min-width: 160px;
    position: absolute;
    display: none;
    top: 10vh;
    border-radius: 15px;
    transition: all 0.5s ease;
}
.li_main:hover .submenu_main{
    display: block;
    top: 5vh;
}

#search_btn{
    background-color: white;
    border-radius: 7px;
    border: none;
    width: 35px;
    height: 35px;
    justify-content: center;
    align-items: center;
    display: flex;
}

<!DOCTYPE html>
<html lang = "fa" dir = "rtl">

<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity = "sha384-dpuaG1suU0eT09tx5plTaGMLBsfDLzUCCUXOY2j/LSvXYuG6Bqs43ALlhIqAJVRb" crossorigin = "anonymous">
    <link rel = "stylesheet" href = "stayle.css">
    <title>News pews: P.A</title>
</head>

<body>

    <header class = "w-100">
        <nav class = "the_bg_red px-2 w-100">
            <div class = "row h-100 ">
                <div class = "col-1 d-flex align-items-center justify-content-center">
                    <button class = "btn bg-light the_txt_red bars_btn p-3 darkmode_btn_toggle"></button>
                </div>
                <div class = "col-7 col-xl-2 d-flex align-items-center">
                    logo img
                </div>
                <div class = "col-7 d-none d-xl-flex justify-content-center ">
                    <ul class = "menus h-100 text-light  ">
                        <li class = "li_main ">
                            <div class = "d-flex">
                                <p>main page</p><i class = "fas fa-angle-down ms-2 mt-1"></i>
                            </div>
                            <div class = "submenu_main ">
                                <ul class = "">
                                    <li><a href = "#" class = "text-dark">author</a></li>
                                    <li><a href = "#" class = "text-dark">contact with us</a></li>
                                    <li><a href = "#" class = "text-dark">about us</a></li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class = "col-4 col-xl-2 d-flex align-items-center justify-content-center p-0 ">
                    <button type = "button" class = "mx-2 me-md-5 ms-md-3 darkmode_btn_toggle" data-bs-toggle = "modal" data-bs-target = "#search_modal"
                        id = "search_btn"></button>
                </div>
            </div>
        </nav>
    </header>



</body>
<script src = "js/bootstrap.bundle.min.js"></script>

</html>

html css overflow bootstrap-5 bootstrap-rtl

14.07.2024 16:12

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Раскрывающийся список посередине у меня всегда работает, даже если я активирую закомментированный overflow: hidden в теле. Выпадающий список будет обрезан, если вы добавите overflow: hidden в навигацию. Возможно, вы пробовали это однажды.

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

Почему происходит горизонтальное переполнение?

Ваш <div class = "h-100 row"> вызывает переполнение. Класс .row присваивает элементу поля слева и справа и делает его шире, чем элемент, в котором он находится.

Исправить переполнение

Я мало что знаю о начальной загрузке, но вам нужно ограничить ширину этого элемента. .row должен быть окружен элементом класса .container. Это исправит ваше переполнение. Альтернативно вы можете добавить в строку класс .w-100.

Итак, решение будет:

<header class = "w-100">
    <nav class = "the_bg_red px-2 w-100">
        <div class = "container">
            <div class = "row h-100 ">
                  <!-- Rest of the HTML code -->
            </div>
        </div>
    </nav>
</header>

Альтернативно: