將菜單懸停在鏈接上時，使菜單子鏈接出現

Question

我的網站是londontradition.com。我試圖將菜單鏈接“關於我們”和“新聞”顯示在鼠標懸停在上方時的子鏈接。 任何幫助表示贊賞。

這是我需要此效果才能工作的菜單部分的代碼。

<li id="menu-item-749" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children has-sub open"><a href="#"><span>About us</span>
</a><ul style="display: block;">
<li id="menu-item-1006" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://www.londontradition.com/about-us/history/"><span>HISTORY</span></a></li>
<li id="menu-item-1007" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://www.londontradition.com/about-us/heritage/"><span>HERITAGE</span></a></li></ul><span class="holder"></span></li>

Answer 1

您可以使用CSS做到這一點。

嘗試這樣的事情：

.parent:hover {
  .child {
    display: block;
  }
}

Answer 2

CSS和javascript有幾種方法可以做到這一點。 我發現最簡單的方法是使用CSS。

.subMenu {display:none;}
.menuItem:hover .subMenu{ display:block;}

Answer 3

首先，您必須通過display:none隱藏子菜單。 之后，您可以使用CSS中的:hover觸發父菜單，並在那里display:block子菜單的display:block 。 這將通過懸停打開子菜單。

這是一個例子：

 .menu-children { display: none; } .menu-item-has-children:hover .menu-children { display: block; } 

 <li id="menu-item-749" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children has-sub open"><a href="#"><span>About us</span> </a> <ul class="menu-children"> <li id="menu-item-1006" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://www.londontradition.com/about-us/history/"><span>HISTORY</span></a> </li> <li id="menu-item-1007" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://www.londontradition.com/about-us/heritage/"><span>HERITAGE</span></a> </li> </ul><span class="holder"></span> </li> 

請注意，要給您的子菜單ul列出類menu-children （例如此代碼段中的示例）

更新資料

我注意到您的頁面正在使用JavaScript，該JavaScript設置了display參數。 因此，您需要更改JavaScript 或嘗試以下CSS：

.menu-children {
  display: none !important;
}
.menu-item-has-children:hover .menu-children {
  display: block !important;
}

查看!important標簽以獲取CSS中的display參數。

Answer 4

嗯，好的，沒有人看過該頁面...

它只是一個選擇器 ，代碼中的東西就是編寫該選擇器以隱藏所有子菜單。

#mobile-menu ul ul {
    display: none;
    ...
}

因此，您必須編寫一個具有更高優先級的選擇器，以顯示懸停時的子菜單。

#mobile-menu ul li:hover > ul {
    display: block;
}

您可以在此處閱讀有關選擇器優先級的文章： https ://css-tricks.com/specifics-on-css-specificity/

---

但是現在又遇到了另一個問題，您有了一個Javascript函數，該函數可以顯示和隱藏子菜單，並且此函數會與:hover沖突：

$('body').on('click', '.holder', function() {
   ... do hide and show things ...
});

因此，您必須在代碼中添加一個難看的！important，以覆蓋懸停時Javascript函數中的內聯樣式（ style="display:none; ）：

#mobile-menu ul li:hover > ul {
    display: block !important;
}

更好的方法是編輯函數並添加新的離開函數：

$('body').on('click mouseenter', '.holder', function() {
   ... do show (and hide on click) thing ...
});

和

$('body').on('mouseleave', '.has-sub', function() {
   ... do hide thing ...
});

第二個功能在帶有子菜單的完整<li class="... has-sub ...">上，以便有機會點擊子菜單;-)