javascript - 放入导航栏时不显示下拉菜单

Question

我有一个应该制作下拉菜单的 HTML 片段。它工作正常，但是当我把它放在我的“导航栏”中时，它将被限制为“导航栏”的大小。如果我将它放在导航栏之外，我就无法放置它，所以它看起来像是在“导航栏”中。知道该怎么做吗？

它是这样的:

/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

div.navBar {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 50px;
    background-color: #1a1a1a;
}

#Logo {
    height: 50px;
    width: auto;
    top: 0%;
    position: absolute;
}

/* Remove margins and padding from the list, and add a black background color */
ul.topnav {
    list-style-type: none;
    margin: 0;
    overflow: hidden;
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -75%);
    width: 100%;
}

/* Float the list items side by side */
ul.topnav li {
    display:inline-block;
    align-content: center;
    width: 15%;
    }

/* Style the links inside the list items */
ul.topnav li a {
    display: inline-block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}

/* Change color of links on hover */
ul.topnav li a:hover {color: #555;}

/* When the screen is less than 680 pixels wide, 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) */
@media screen and (max-width:680px) {
  ul.topnav li {
    display: none;
    }
}

#User {
    postion: absolute;
    top: 0px;
    right: -90%;
    top: 100%;
}


/* Dropdown Button */
.dropbtn {
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: auto;
}

/* Dropdown button on hover */
.dropbtn:hover {
    color: #555;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    overflow-y: 1000;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

	<div class="navBar">
		<ul class="topnav" id="myTopnav">
		  <li><a href="https://case-clicker.000webhostapp.com"><img id="Logo" alt="Logo" src="/img/logotext.png"></a></li>
		  <li><a href="#home">Home</a></li>
		  <li><a href="#news">News</a></li>
		  <li><a href="#contact">Contact</a></li>
		  <li><a href="#about">About</a></li>
                  <li><div class="dropdown">
                        <button onclick="myFunction()" class="dropbtn"><img alt="userAvatar" src="<?=$steamprofile['avatar']?>"><?=$steamprofile['personaname']?></button>
                        <div id="myDropdown" class="dropdown-content">
                          <a href="#">Link 1</a>
                          <a href="#">Link 2</a>
                          <a href="#">Link 3</a>
                        </div>
                      </div>
                  </li>
		</ul>
	</div>

Answer 1

只需从 #navBar 和 #topnav 中删除 overflow:hidden

(还将 postion 修复到 #User 上的 position)

/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

div.navBar {
  position: relative;
  width: 100%;
  height: 50px;
  background-color: #1a1a1a;
}
#Logo {
  height: 50px;
  width: auto;
  top: 0%;
  position: absolute;
}
/* Remove margins and padding from the list, and add a black background color */

ul.topnav {
  list-style-type: none;
  margin: 0;
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translate(-50%, -75%);
  width: 100%;
}
/* Float the list items side by side */

ul.topnav li {
  display: inline-block;
  align-content: center;
  width: 15%;
}
/* Style the links inside the list items */

ul.topnav li a {
  display: inline-block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 17px;
}
/* Change color of links on hover */

ul.topnav li a:hover {
  color: #555;
}
/* When the screen is less than 680 pixels wide, 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) */

@media screen and (max-width: 680px) {
  ul.topnav li {
    display: none;
  }
}
#User {
  position: absolute;
  top: 0px;
  right: -90%;
  top: 100%;
}
/* Dropdown Button */

.dropbtn {
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: auto;
}
/* Dropdown button on hover */

.dropbtn:hover {
  color: #555;
}
/* The container <div> - needed to position the dropdown content */

.dropdown {
  position: relative;
  display: inline-block;
}
/* Dropdown Content (Hidden by Default) */

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  overflow-y: 1000;
}
/* Links inside the dropdown */

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* Change color of dropdown links on hover */

.dropdown-content a:hover {
  background-color: #f1f1f1
}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */

.show {
  display: block;
}

<div class="navBar">
  <ul class="topnav" id="myTopnav">
    <li>
      <a href="https://case-clicker.000webhostapp.com">
        <img id="Logo" alt="Logo" src="/img/logotext.png">
      </a>
    </li>
    <li><a href="#home">Home</a>
    </li>
    <li><a href="#news">News</a>
    </li>
    <li><a href="#contact">Contact</a>
    </li>
    <li><a href="#about">About</a>
    </li>
    <li>
      <div class="dropdown">
        <button onclick="myFunction()" class="dropbtn">
          <img alt="userAvatar" src="<?=$steamprofile['avatar']?>">
          <?=$steamprofile[ 'personaname']?>
        </button>
        <div id="myDropdown" class="dropdown-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </div>
    </li>
  </ul>
</div>