放入导航栏时未显示下拉菜单

时间：2017-01-17 20:16:59

标签： javascript html css

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

它的外观如下： Dropdown in navbar 

/* 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>

1 个答案:

答案 0 :(得分：1)

只需从overflow:hidden和#navBar

中删除#topnav即可

（还将postion修复为position上的#User ）

/* 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>

相关问题
最新问题