我的下拉選單在懸停時不會保持打開狀態

我面臨一個問題，當我將游標懸停在下拉選單上時，它不會保持打開狀態。它有時會保持打開一段時間然后消失。我一直在努力尋找解決方案，但我無法真正說出問題所在。誰能幫我？我是 CSS 和 HTML 的新手...

.arrow {
  background-image: url(arrow.png);
  background-repeat: no-repeat;
  background-position: 100px;
}

.menu-area ul {
  text-transform: uppercase;
  list-style: none;
  width: 145px;
  margin-left: 10px;
  padding: 0px;
  position: absolute;
  display: block;
  box-shadow: 10px 10px 5px rgba(96, 96, 96, 0.8);
}

.menu-area ul ul {
  margin-left: 1px;
  position: absolute;
  display: none;
  left: 100%;
  top: 0px;
}

.menu-area ul li {
  border-bottom: 1px solid white;
  background: MediumVioletRed;
  position: relative;
  display: block;
  margin-bottom: 0px;
}

.menu-area ul li a {
  font-family: verdana;
  font-size: 12px;
  font-weight: bold;
  text-align: left;
  color: white;
  text-decoration: none;
  padding: 10px 20px;
  display: block;
}

.menu-area ul li:hover {
  background-color: hotpink;
}

.menu-area ul li:hover>ul {
  display: block;
}

<div class="menu-area">
  <ul>
    <li><a href="home_guru.php">Home</a></li>
    <li><a class="arrow" href="#">Soalan</a>
      <ul>
        <li><a href="soalan_insert2.php">Add</a></li>
        <li><a href="soalan_update2.php">Update</a></li>
        <li><a href="soalan_delete2.php">Delete</a></li>
        <li><a href="soalan_senarai.php">List</a></li>
        <li><a class="arrow" href="#">Topic</a>
          <ul>
            <li><a href="topik_insert2.php">Add</a></li>
            <li><a href="topik_update2.php">Update</a></li>
            <li><a href="topik_delete2.php">Delete</a></li>
            <li><a href="topik_senarai.php">List</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

uj5u.com熱心網友回復：

加入特殊照顧margin-left: 1px;上.menu-area ul ul，這使得主UL和您的子選單UL之間1px的差距。如果您達到該差距（這很難，因為它只有 1 像素，但仍有可能），子選單將關閉。

洗掉邊距，以便 ul 彼此“接觸”而沒有間隙，以便選單和子選單之間的安全過渡（您可以添加與填充相同的間距，以便保持 1px 的間隙）。除了這個 1px 的差距之外，一切都運行得很順利。

一般來說，我會建議添加https://github.com/kamens/jQuery-menu-aim tho 以便在嘗試到達最后一個子選單項時選單不會關閉（您最有可能移出 main-ul 這使得選單立即關閉）。

uj5u.com熱心網友回復：

由于與子元素之間存在 1px 的間隙，因此未應用懸停樣式。您可以洗掉該邊距并在子 ul 上設定透明邊框

.arrow {
  background-image: url(arrow.png);
  background-repeat: no-repeat;
  background-position: 100px;
}

.menu-area ul {
  text-transform: uppercase;
  list-style: none;
  width: 145px;
  margin-left: 10px;
  padding: 0px;
  position: absolute;
  display: block;
  box-shadow: 10px 10px 5px rgba(96, 96, 96, 0.8);
}

.menu-area ul ul {
  margin-left: 0;
  border-left: 1px solid transparent;
  position: absolute;
  display: none;
  left: 100%;
  top: 0px;
}

.menu-area ul li {
  border-bottom: 1px solid white;
  background: MediumVioletRed;
  position: relative;
  display: block;
  margin-bottom: 0px;
}

.menu-area ul li a {
  font-family: verdana;
  font-size: 12px;
  font-weight: bold;
  text-align: left;
  color: white;
  text-decoration: none;
  padding: 10px 20px;
  display: block;
}

.menu-area ul li:hover {
  background-color: hotpink;
}

.menu-area ul li:hover>ul,
.menu-area ul li>ul:hover {
  display: block;
}

<div class="menu-area">
  <ul>
    <li><a href="home_guru.php">Home</a></li>
    <li><a class="arrow" href="#">Soalan</a>
      <ul>
        <li><a href="soalan_insert2.php">Add</a></li>
        <li><a href="soalan_update2.php">Update</a></li>
        <li><a href="soalan_delete2.php">Delete</a></li>
        <li><a href="soalan_senarai.php">List</a></li>
        <li><a class="arrow" href="#">Topic</a>
          <ul>
            <li><a href="topik_insert2.php">Add</a></li>
            <li><a href="topik_update2.php">Update</a></li>
            <li><a href="topik_delete2.php">Delete</a></li>
            <li><a href="topik_senarai.php">List</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

標籤：html css

上一篇：使用api資料從我的選擇中使用javascript進行驗證

下一篇：關于C#中數字轉換的演算法混亂