當鼠標懸停在鏈接上時出現菜單子鏈接

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

首先你必須通過display:none來隱藏你的兒童菜單。之後，您可以使用CSS中的:hover和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，它設置了display參數。這就是爲什麼你需要改變你的JavaScript 或你可以試試下面的CSS：

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

看那!important標籤在CSS中display參數。

Answer 2

你可以用css來做到這一點。

嘗試財產以後這樣的：

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

Answer 3

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

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

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 ... 
}); 

所以，你必須添加一個醜陋的！你的代碼重要的是覆蓋從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 ...">子菜單克等有機會克利克子菜單;-)