'Dropdown overflow in movie screen

I have created a responsive navbar but when I display it on moble screen my DropDown content float over my logo? I tried some way to solve this issue but none of them are useful for me. I understand that I use button instant of a but if I use this it cause another problem and If I use div then it looks like this as shown in given image.

Here is my issue when I open it on mobile phone..

<!doctype html>
<html lang="en">
  <head>
    <title></title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS v5.0.2 -->
    <link rel="icon" type="image/x-icon" href="logo.png">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"  integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
  </head>
  <body>
      
    <nav>

      <style>
        /* body {
          margin: 0;
          font-family: Arial, Helvetica, sans-serif;
        } */
  
        ._topnav_ {
          overflow: hidden;
          background-color: rgba(0, 0, 0, 0.925);
          padding: 10px;
          /* position: fixed; */
         max-width: 100%!important;
    
        }
    
  
        ._topnav_ a {
          float: left;
          display: block;
          color: #ffffff;
          text-align: center;
          padding: 24px 12px;
          text-decoration: none;
          font-size: 19px;
          font-weight: bold;
  
  
        }
  
        ._topnav_ a:hover {
  
          /* color: rgb(0, 0, 0); */
  
          transition: .2s;
          border-radius: 1px;
      
          color: #AA8445;
          border-bottom: 3px solid #AA8445;
  
  
  
        }
  
        ._topnav_ .icon {
          display: none;
        }
  
        @media screen and (max-width: 600px) {
          ._topnav_ a:not(:first-child) {
            display: none;
          }
  
          ._topnav_ a.icon {
            float: right;
            display: block;
          }
  
        }
  
        @media screen and (max-width: 600px) {
          ._topnav_.responsive {
            position: relative!important;
          }
  
          ._topnav_.responsive .icon {
            position: absolute!important;
            right: 0!important;
            top: 0!important;
            transition: .9s!important;
  
          }
  
          ._topnav_.responsive a {
            float: none!important;
            display: block!important;
            text-align: left!important;
  
            transition: .9s;
  
          }
  
  
        }
  
        .container {
        
          cursor: pointer;
        }
  
        .bar1,
        .bar2,
        .bar3 {
          width: 30px!important;
          height: 2px!important;
          background-color:  rgba(255, 255, 255, 0.925)!important;
          margin: 6px 0!important;
          transition: 0.9s!important;
        }
  
        .change .bar1 {
          -webkit-transform: rotate(-45deg) translate(-9px, 6px)!important;
          transform: rotate(-45deg) translate(-9px, 6px)!important;
        }
  
        .change .bar2 {
          opacity: 0!important;
        }
  
        .change .bar3 {
          -webkit-transform: rotate(45deg) translate(-8px, -8px)!important;
          transform: rotate(45deg) translate(-8px, -8px)!important;
        }









        ._dropdown_ {
  float: left;
  overflow: hidden;
}

._dropdown_ ._dropbtn_ {
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}


._dropdown_:hover ._dropbtn_ {
  background-color: red;
}

._dropdown-content_ {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

._dropdown-content_ a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

._dropdown-content_ a:hover {
  background-color: #ddd;
}

._dropdown_:hover ._dropdown-content_ {
  display: block;
}
        
      </style>
      
      <div class="">
  
  
        <div class="_topnav_" id="my_topnav_">
          <a href="index.php" class="active" style="margin-top: -9px; border-bottom: none;">&nbsp;</i><img src="c_logo.png"
            style="margin-right: -6px;" class=" _logo"></a>

           <a href="index.php" class="active" style="border-bottom: none; margin-left: 1.5in;">&nbsp;</i><span >Home</a> 
 

              
  
          <!-- <a href="">&nbsp;Home</a> -->
 
    <a href="">&nbsp;About us</a>

 
    <div class="_dropdown_">
      <button class="_dropbtn_">Dropdown 
        <i class="fa fa-caret-down"></i>
      </button>
      <div class="_dropdown-content_">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div> 
  
          <a href="">&nbsp;Services</a>
  
          <a href="">&nbsp;Testimonial</a>
  
          <a href="" style="float: right !important;">&nbsp;<i class="fas fa-phone-alt"></i>&nbsp;&nbsp;Contact Us</a>
  
          <a href="javascript:void(0);" class="icon" onclick="myFunction()">
            <!-- <i class="x" id="cg"><i class="fas fa-bars"></i></i> -->
            <div class="container" style="background-color: rgba(20, 20, 20, 0.918)" onclick="myFun(this)">
              <div class="bar1"></div>
              <div class="bar2"></div>
              <div class="bar3"></div>
            </div>
          </a>
        </div>
      </div>
   
  
      <script>
        function myFunction() {
          var x = document.getElementById("my_topnav_");
  
  
          if (x.className === "_topnav_") {
            x.className += " responsive";
  
  
  
  
          } else {
            x.className = "_topnav_";
  
  
          }
        }
        function myFun(x) {
          x.classList.toggle("change");
        }
  
  
      </script>
  
    </nav>

   
    
    <!-- Bootstrap JavaScript Libraries -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"  integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://kit.fontawesome.com/318b13fec7.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
  </body>
</html>

Someone please help me out with this problem?

Solution 1:^[1]

Don't use overflow: hidden and floats just use display: flex and flex-direction: column; this will help you a lot instead of using float and overflow If you are a little confused Read a little bit about flex https://developer.mozilla.org/en-US/docs/Web/CSS/flex

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Mohamed Ibrahim

'Dropdown overflow in movie screen

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]