My goal is to showcase all of my menu items in a line while keeping the sub-menus hidden until their parent is hovered over. I achieved the inline display using 'display: inline', but encountered an issue where the sub-menu disappears when the cursor is between two item lines due to uncontrollable line height and cursor positioning outside the main li element. I've considered using the 'display: flex' property, but struggled to make it work. Any ideas or suggestions?
https://i.sstatic.net/gB44l.png
https://i.sstatic.net/824Kr.png
Here's the HTML code:
<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>
And here's the CSS styling used:
#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; }
If you'd like to view a working example, check out this jsfiddle link: https://jsfiddle.net/vcs3fyxh/