如何实现内联菜单悬停显示子菜单并解决消失问题

我想把所有菜单项设置为inline显示，已经用display:inline实现了，但需要子菜单默认隐藏，鼠标悬停父菜单项时显示。目前功能接近完成，但当鼠标处于菜单项两行之间时，子菜单会消失——原因是没法控制line-height，这时光标已经移出主<li>元素。试过用display:flex但没成功，求解决思路。

原HTML代码 #

<div id="menu-container">
<div class="menu-menu-container"><ul id="menu-menu" class="menu"><li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-22"><a href="http://localhost:8888/le-projet/">Le projet</a>
<ul class="sub-menu">
    <li id="menu-item-23" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-23"><a href="#presentation">Présentation</a></li>
    <li id="menu-item-24" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-24"><a href="#projet">Le projet</a></li>
    <li id="menu-item-25" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-25"><a href="#site">Le site</a></li>
    <li id="menu-item-26" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-26"><a href="#equipe">L'équipe</a></li>
    <li id="menu-item-27" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-27"><a href="#partenaires">Les partenaires</a></li>
</ul>
</li>
<li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-21"><a href="http://localhost:8888/les-collections/">Les collections</a>
<ul class="sub-menu">
    <li id="menu-item-28" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-28"><a href="#collections-frac">Les collections</a></li>
    <li id="menu-item-30" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-30"><a href="#dernieres-acquisitions">Les acquisitions</a></li>
    <li id="menu-item-31" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-31"><a href="#carte">La carte de diffusion</a></li>
    <li id="menu-item-32" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-32"><a href="#modalites">Les modalités</a></li>
</ul>
</li>
</ul>
</div>

原CSS代码 #

#menu-container {
width: 100%;
padding: 0px; }

.menu {
font-size: 35px;
line-height: 55px; }

.menu a {
color: black; }

.menu-item-has-children a {
font-weight: bold; }

.menu-item-has-children ul a {
font-weight: normal; }

.menu li li {
margin-right: 10px; }

.menu li:hover .sub-menu {
opacity: 1; }

.menu .sub-menu {
margin-left: 10px;
opacity: 0; }

.menu li, .menu ul {
display: inline; }

问题核心是display:inline的元素只会包裹内容区域，不会占据line-height对应的垂直空间，鼠标移到行高空白处时会脱离<li>的hover范围。以下是修复方案：

修改后的CSS代码 #

#menu-container {
  width: 100%;
  padding: 0;
}

.menu {
  font-size: 35px;
  line-height: 55px;
}

.menu a {
  color: black;
}

.menu-item-has-children a {
  font-weight: bold;
}

.menu-item-has-children ul a {
  font-weight: normal;
}

.menu li li {
  margin-right: 10px;
  display: inline; /* 子菜单项保持横向排列 */
}

/* 父菜单项改用inline-block，占据完整行高空间 */
.menu > li {
  display: inline-block;
  position: relative;
}

/* 子菜单默认隐藏，用visibility替代opacity避免无效交互 */
.menu .sub-menu {
  margin-left: 10px;
  visibility: hidden;
  position: absolute;
  left: 0;
  top: 100%; /* 子菜单悬浮在父菜单下方 */
  white-space: nowrap; /* 防止子菜单换行 */
}

/* 鼠标悬停时显示子菜单 */
.menu li:hover .sub-menu {
  visibility: visible;
}

关键修改说明 #

1. inline-block替代inline：父<li>设置为inline-block后，会占据line-height对应的完整垂直空间，鼠标移到两行之间的空白处时仍处于<li>范围内，不会触发hover失效。
2. visibility替代opacity：opacity:0时元素仍可响应鼠标事件，visibility:hidden则完全隐藏且不触发交互，更适合菜单场景。
3. 绝对定位子菜单：position:absolute让子菜单脱离文档流，不会打乱主菜单的布局，white-space:nowrap保证子菜单项横向排列不换行。

如果需要子菜单和主菜单在同一行显示，可调整子菜单的定位逻辑：

/* 子菜单与主菜单同行显示的版本 */
.menu .sub-menu {
  margin-left: 10px;
  visibility: hidden;
  display: inline;
}

.menu li:hover .sub-menu {
  visibility: visible;
}

.menu > li {
  display: inline-block;
}

内容的提问来源于stack exchange，提问作者mmdwc