I'm working on a personal news website and the name is News pews this is my third project and i didn't have this problem in my other project.
my page have a x scroll and when i want to remove it with overflow: hidden;
it works but my drop downs disabled and i tried lots of other codes but none of them worked.
this is the code(i write these codes as short as possible only for this question):
you have to open this snippet in the fullpage to see the drop down (the fullpage button is at the end of the snippet).
*{
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>