响应式下拉导航问题

Question

大家好，希望你能帮助我，因为某些原因我的移动版导航下拉菜单在移动到真正的小屏幕时会被削减。当屏幕更大时，我没有任何问题，但是当浏览器处于最小时，它会将（“Tours和Daytours”）导航减少一半。我认为问题出在.dropdown：hover .dropdown-menu class但不知道如何修复它。

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><a href="#">Home</a>
    </li>
    <li><a href="#">About Us</a>
    </li>
    <li class="dropdown">
      <a class="DropDown-toggle" data-toggle="dropdown" href="#">Tours <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="#">Tours</a>
        </li>
        <li><a href="#">Day Tours</a>
        </li>
      </ul>
    </li>
    <li><a href="#">Contact Us</a>
    </li>
    <li class="icon"><a href="javascript:void(0);" onClick="myFunction()">&#9776;</a>
    </li>

  </ul>
  <!--End main ul-->
</div>
<!--End Nav-menu-->

Answer 1

因为：

.Menu has {overflow: hidden;} //remove this line

设置下拉列表的宽度

.dropdown-menu { width: 200px;}

Answer 2

我认为您应该在css上使用媒体查询来设置大小宽度