欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

為什么我的菜單按鈕在屏幕上被激活？

CSS
呂致盈1年前8瀏覽0評論

我最近創建了一個網站，左側有一個下拉菜單。然而，每當我在屏幕的頂部，下拉菜單應該在左邊，即使我在屏幕的另一邊，下拉菜單也會激活。我以為只有當我懸停在按鈕上時它才會激活。

.dropbtn {
  background-color: rgb(191, 255, 181);
  padding: 0px;
  font-size: 45px;
  border: none;
  width: 100px;
  height: 100px;
}


.dropdown-content {
  display: none;
  position: absolute;
  background-color: #98CC90;
  min-width: 16px;
  border-radius: 5px;
  z-index: 0;
}

.dropdown {
text-align: left;
}

.dropdown-content a {
  color: #182016;
  padding: 12px 12px;
  text-decoration: none;
  font-size: 35px;
   font-family: Arial, sans-serif;
  display: block;
}

.dropdown-content a:hover {background-color: #79A373;}

.dropdown-content a:hover {border-radius: 5px;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: rgb(191, 255, 181);}

<div class="dropdown">
  <button class="dropbtn"><div class="menu"><img src="https://www.freeiconspng.com/thumbs/menu-icon/menu-icon-6.png"/></div></button>
  
  <div class="dropdown-content">
    <a onclick="window.location.>About me</a>
    <a onclick="window.location.>DNI List</a>
    <a onclick="window.location.>Website Stuff</a>
  </div>
</div>`

正如您在問題中提到的，您希望只有當按鈕懸停時才顯示下拉內容。但是對于懸停下拉內容，即使下拉內容被懸停，它也必須保持顯示。 所以我修改了你的代碼。

.dropbtn {
  background-color: rgb(191, 255, 181);
  padding: 0px;
  font-size: 45px;
  border: none;
  width: 100px;
  height: 100px;
}


.dropdown-content {
  display: none;
  position: absolute;
  background-color: #98CC90;
  min-width: 16px;
  border-radius: 5px;
  z-index: 0;
}

.dropdown {
text-align: left;
}

.dropdown-content a {
  color: #182016;
  padding: 12px 12px;
  text-decoration: none;
  font-size: 35px;
   font-family: Arial, sans-serif;
  display: block;
}

.dropdown-content a:hover {background-color: #79A373;}

.dropdown-content a:hover {border-radius: 5px;}

.dropbtn:hover + .dropdown-content, .dropdown-content:hover {display: block;}

.dropdown:hover .dropbtn {background-color: rgb(191, 255, 181);}

<div class="dropdown">
  <button class="dropbtn"><div class="menu"><img src="https://www.freeiconspng.com/thumbs/menu-icon/menu-icon-6.png"/></div></button>
  
  <div class="dropdown-content">
    <a onclick="window.location.>About me</a>
    <a onclick="window.location.>DNI List</a>
    <a onclick="window.location.>Website Stuff</a>
  </div>
</div>`

.dropbtn {
  background-color: rgb(191, 255, 181);
  padding: 0px;
  font-size: 45px;
  border: none;
  width: 100px;
  height: 100px;
}


.dropdown-content {
  display: none;
  position: absolute;
  background-color: #98CC90;
  min-width: 16px;
  border-radius: 5px;
  z-index: 0;
}

.dropdown {
text-align: left;
}

.dropdown-content a {
  color: #182016;
  padding: 12px 12px;
  text-decoration: none;
  font-size: 35px;
   font-family: Arial, sans-serif;
  display: inline-block;
}

.dropdown-content a:hover {background-color: #79A373;}

.dropdown-content a:hover {border-radius: 5px;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: rgb(191, 255, 181);}