CSS - 悬停可见另一个子菜单

Posted 2023-03-06

【中文标题】CSS - 悬停可见另一个子菜单

【英文标题】：CSS - hover visible another submenu

【发布时间】：2015-04-03 08:24:48

【问题描述】：

我正在使用 Wordpress 菜单，其中有经典菜单和项目的子菜单。当我悬停一些有子项的项目时，将显示子菜单。问题是当我有一些页面并且我想显示当前页面的固定子菜单时。

我的 JSFiddle 在这里 http://jsfiddle.net/d2Lcukoe/ 可以看到我的菜单，悬停在“Live show”或“Elvis Presley”上，您会看到子菜单。猫王是我当前的页面 - 有 css 类current-menu-item。我想让它的子菜单在没有悬停的情况下可见，但是当我悬停 Live show 以查看其子菜单（另一个子菜单）时，当我取消悬停时再次查看当前子菜单。

我在上一个 css 课上试过这个：

.second-navigation ul > li.current-menu-item > ul 
      visibility: visible;

它会显示当前子菜单，但我在悬停时看不到“现场表演”的另一个子菜单。我怎样才能做到这一点？我很抱歉英语不好。

JSFiddle 中的答案是最好的。

【参考方案1】：

您应该可以通过添加following：

li.current-menu-item .sub-menu 
    visibility: visible;
    z-index: 100;

当当前菜单项有子菜单时，设置为可见，z-index 设置为 100。另一个子菜单有一个 z-index，如果为 101，则显示和隐藏另一个子菜单。