我试图显示我所有的菜单项内联，我设法做到这一点使用显示内联，虽然我希望子菜单被隐藏，并显示时，悬停其父。它almmmost作品，唯一的事情是，子菜单disapears当鼠标之间的2行项目，因为我不能控制行的高度，和光标实际上是出了主要的li项目。我想也许使用显示灵活的属性，但我不能管理，使其工作…知道吗？

这是我的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%;填充：0px;

.menu { font-size：35 px;行高：55px; }
.menu a { color：black; }
.menu-item-has-children a { font-weight：black; }
.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：10 px;不透明度：0; }
.menu li，.menu ul {显示：inline; }
一个jsfiddle：https://jsfiddle.net/vcs3fyxh/