Issue with responsive dropdown navigation - html

Question

Hi guys hope you can help me for some reason my mobile version navigation dropdown menu gets cut down when moving to a real small screen. When the screen is bigger I don't have any issues but when browser is at its smallest it cuts the ("Tours and Daytours") nav in half. I think the problem lies within .dropdown:hover .dropdown-menu class but not sure how to fix it.
function myFunction() {
document.getElementsByClassName("Menu")[0].classList.toggle("responsive");
}
/*hide all list items, except for the first one ("Home").
Show the list item that contains the link to
open and close the topnav (li.icon) */
.Menu li:not(:first-child) {
display: none;
border-bottom: none;
}
.Menu li.icon {
float: right;
display: inline-block;
}
/* The "responsive" class is added to the Menu with JavaScript
when the user clicks on the icon. This class makes the Menu look good
on small screens */
.Menu.responsive {
position: relative;
}
#TA_socialButtonIcon936 {
width: 28px;
height: 28px;
display: inline-flex;
overflow: hidden;
position: relative;
float: none;
}
.Menu {
margin-top: 15px;
width: 54%;
overflow: hidden;
}
.Menu.stick {
margin-top: 10px;
}
.Menu.responsive li.icon {
position: absolute;
right: 0;
top: -4px;
border: none;
}
.Menu.responsive ul li.icon a {
border-bottom: none;
}
.Menu.responsive li {
float: none;
display: inline;
}
.Menu.responsive li a {
display: block;
text-align: left;
background-color: #161616;
border-bottom: solid 1px #FFFFFF;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/*Dropdown arrow for link items*/
.caret {
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: 4px dashed;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-menu {
position: absolute;
visibility: hidden;
min-width: 100px;
background-color: #161616;
opacity: 0;
-webkit-transition: opacity 0.4s ease-in-out;
-moz-transition: opacity 0.4s ease-in-out;
transition: opacity 0.4s ease-in-out;
}
/* links inside the dropdown*/
.dropdown-menu a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
border-top: solid 1px #FFFFFF;
border-right: solid 1px #FFFFFF;
margin-top: 0px;
}
.dropdown-menu a:last-child {
border-top: 0;
}
/* Change color of dropdown links on hover */
.dropdown-menu a:hover {
color: #755378;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-menu {
visibility: visible;
right: auto;
left: -151px;
bottom: -47px;
opacity: 1;
}
<div class="Menu">
<!--Nav-menu-->
<!--Social media button-->
<div id="TA_socialButtonIcon936" class="TA_socialButtonIcon">
<ul id="Ug7Rjth" class="TA_links amVFTKsFPp">
<li id="pyCAn7LGV" class="eYF1SLHKaeE">
<a target="_blank" href="https://www.tripadvisor.com/Attraction_Review-g312578-d2284717-Reviews-Felleng_Day_Tours-Johannesburg_Greater_Johannesburg_Gauteng.html">
<img src="https://www.tripadvisor.com/img/cdsi/img2/branding/socialWidget/20x28_white-21690-2.png" alt="media-icon" />
</a>
</li>
</ul>
</div>
<!--End Social media button-->
<ul>
<!--Start Main ul-->
<li>Home
</li>
<li>About Us
</li>
<li class="dropdown">
<a class="DropDown-toggle" data-toggle="dropdown" href="#">Tours <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Tours
</li>
<li>Day Tours
</li>
</ul>
</li>
<li>Contact Us
</li>
<li class="icon">☰
</li>
</ul>
<!--End main ul-->
</div>
<!--End Nav-menu-->

Answer 1

It`s cutted because:
.Menu has {overflow: hidden;} //remove this line
And set width for dropdowns
.dropdown-menu { width: 200px;}

Answer 2

i think you should use media query on your css to set size width