Search code examples
htmlcssflexboxinline-styles

display all of menu items inline, with abilty to controll line height

i'm trying to display all my menu items inline, I managed to do it using display inline, tho I want the sub menus to be hidden and to show up when hovering their parent. It almmost works, the only thing is that, the sub-menu disapears when the mouse is between the 2 lines of item, since I can't control the line height, and the cursor is actually out of the main li item. I was thinking maybe using display flex property but I can't manage to make it work... any idea ?

enter image description here

enter image description here

here's my 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>

and the 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; }

and a jsfiddle : https://jsfiddle.net/vcs3fyxh/

Solution

  • In that case you can change the display of the sub-menu items:

    ul.sub-menu li{
  display: inline-block;  
}

    It looks like it solves the issue if not arises any other issue :p