Submenu - keep max width of the parent element

Question

I have an issue with styling a custom menu: when submenu is visible, the items should not be wider then the current parent item.

I've prepared a simple codepen example below and what I've tried is visible there, but still, the problem is this:

Also, only one submenu is visible at any point on real page if that accounts to anything. And "Longer submenu item" should wrap into two lines if longer then the parent item!

Basic HTML (printed dynamically otherwise of course):

<div id="menu">

  <nav class="nav menu-inline" role="navigation">

    <ul class="">

      <li id="menu-item-68" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-68"><a href="#url">Main Menu item</a>
        <ul class="sub-menu">
          <li id="menu-item-171" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-171">
            <a href="#section1">Longer submenu item</a>
          </li>
          <li id="menu-item-172" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-172">
            <a href="#section2">Another submenu itm</a>
          </li>
        </ul>
      </li>
      <li id="menu-item-14" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-14">
        <a href="#url2">2nd menu item</a>
        <ul class="sub-menu">
            <li id="menu-item-168" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-168">
            <a href="#section1">short submenu</a>
          </li>
          <li id="menu-item-169" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-169">
            <a href="#section2">short #2</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#3">3rd main item</a>
      </li>

    </ul>

  </nav>

</div>

And SASS:

/**

  HOW TO ACHIEVE that "Longer submenu item" is aligned left with "Main Menu item" (if longer it should break into multiple lines). Of course all the text is dynamic and can be of any length..

 */
#menu {
  max-width: 700px; // just to show what I mean easier
}

nav {
  text-align: center;
  font-size: 18px;
  margin-bottom: 30px;
  ul {
    background: aqua;
    list-style-type: none;
    margin: 0;
    padding: 0;

    li {
      text-align:left;
      display: inline-block;
      margin: 0 30px;
      vertical-align: top; // need this (try on/off)

      a {
        color: black;
      }

    }

      &.sub-menu {
        text-align: left; // need this (try on/off)
        margin-top: 15px;
        li {
          display: block;
          margin-left:0; // need this (setting margin for all li above)
          margin-right:0; // need this (setting margin for all li above)
        }
      }

    }
}

How would you go about solving this, I'm a bit at a loss here :)

https://codepen.io/anon/pen/zRQJzB

I think it's better to set `nav ul li { text-align: left; }` . — Anzil khaN, Mar 05 '18 at 11:13
Indeed, that's what I first had. But then this happens (see space between two main menu items - i dont want it changed https://codepen.io/anon/pen/zRQJzB). — trainoasis, Mar 05 '18 at 11:34
what about `position: absolute;` for `nav ul.sub-menu` selector?? — Anzil khaN, Mar 05 '18 at 11:46
That looks OK of course, but then I need to account for the space that should be below .. which I can only do via JS hack. Do you have any other suggestion as how to fix it without hacking around? — trainoasis, Mar 05 '18 at 11:49
I didn't get that ~the space that should be below ~.?? Is your sub menu always open?? — Anzil khaN, Mar 05 '18 at 14:15
@AnzilkhaN Yes, it's always open when you are on the parent page. It does not open on hover if that's what you mean. — trainoasis, Mar 05 '18 at 14:27
I done a demo with my understanding , please check it tell me feedback — Anzil khaN, Mar 06 '18 at 06:05

score 0 · Answer 1 · answered Mar 05 '18 at 11:19

The situation is this: your main <li> items has no fixed width, that's why if you add longer text in submenu, the width of main <li> increases a bit. Actually submenu text is aligned left, the common width is just bigger. Check picture, I've added to the main <li> item and to the submenu a green background:

What can you do to fix situation is to add to a submenu position: absolute, so it'll not affect main <li> width:

    nav ul li {
      display: inline-block;
      margin: 0 30px;
      vertical-align: top;
      position: relative;
    }

    nav ul.sub-menu {
    text-align: left;
    margin-top: 15px;
    position: absolute;
    width: 100%;
}

I know why it happens, just can't seem to figure what to do to keep the current functionality. By your solution, height of the menu is of course just the height of the main menu without submenus - which is not what I need :) I could add an ugly fix for this but that's not really optimal i believe. Also, What I need is for the main menu items to stay distanced from each other as before, see updated codepen: https://codepen.io/anon/pen/zRQJzB — trainoasis, Mar 05 '18 at 11:30

score 0 · Answer 2 · answered Mar 05 '18 at 11:55

You can tweak this by playing with CSS Table layout as described for a simlar issue in this question

We make the li a table but set the submenu to width:1% which will restrict the submenus to the width of the parent li. We can set the li text to no-wrap to offset any wrapping issues.

#menu {
  max-width: 700px;
}

nav {
  text-align: center;
  font-size: 18px;
  margin-bottom: 30px;
}

nav ul {
  background: aqua;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav ul li {
  text-align: left;
  display: inline-table;
  margin: 0 30px;
  vertical-align: top;
  position: relative;
  border: 1px solid grey;
  white-space: nowrap;
}

nav ul li a {
  color: black;
}

nav ul.sub-menu {
  text-align: left;
  margin-top: 15px;
  width: 1%;
}

nav ul.sub-menu li {
  display: block;
  margin-left: 0;
  margin-right: 0;
}

<div id="menu">

  <nav class="nav menu-inline" role="navigation">

    <ul class="">

      <li id="menu-item-68" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-68"><a href="#url">Main Menu item</a>
        <ul class="sub-menu">
          <li id="menu-item-171" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-171">
            <a href="#section1">Longer submenu item</a>
          </li>
          <li id="menu-item-172" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-172">
            <a href="#section2">Another submenu item</a>
          </li>
        </ul>
      </li>
      <li id="menu-item-14" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-14">
        <a href="#url2">2nd menu item</a>
        <ul class="sub-menu">
          <li id="menu-item-168" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-168">
            <a href="#section1">short submenu</a>
          </li>
          <li id="menu-item-169" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-169">
            <a href="#section2">short #2</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#3">3rd main item</a>
      </li>

    </ul>

  </nav>

</div>

Hey. Thanks for your time. If I throw your code in codepen, it doesn't work same as here, hmm. Also, the width between Main Menu item and 2nd menu item, is not the same as the width between 2nd and 3rd as it should be, when submenu for item 1 is visible for example? — trainoasis, Mar 05 '18 at 12:02
That will be a function of the text not wrapping...you can remove that but you might not like what you'll get. — Paulie_D, Mar 05 '18 at 12:07

score 0 · Answer 3 · answered Mar 06 '18 at 06:03

The sub menu only visible when you hover over the li.

#menu {
 max-width: 700px;
}
nav {
 text-align: center;
 font-size: 18px;
 margin-bottom: 30px;
}
nav ul {
 background: aqua;
 list-style-type: none;
 margin: 0;
 padding: 0;
}
nav ul li {
 position: relative;
 text-align: left;
 display: inline-block;
 margin: 0 30px;
 vertical-align: top;
 z-index: 1;
}
nav ul li a {
 color: black;
}
nav li ul.sub-menu {
 text-align: left;
 padding: 5px;
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 max-width: 100%;
 opacity: 0;
 overflow: hidden;
 visibility: hidden;
 transition: all .4s;
}
nav li:hover ul.sub-menu {
 opacity: 1;
 overflow: visible;
 visibility: visible;
 top: 21px;
}
nav ul.sub-menu li {
 display: block;
 margin-left: 0;
 margin-right: 0;
}

<div id="menu">
    <nav class="nav menu-inline" role="navigation">
        <ul class="">
            <li id="menu-item-68" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-68"><a href="#url">Main Menu item</a>
                <ul class="sub-menu">
                    <li id="menu-item-171" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-171"> <a href="#section1">Longer submenu item</a> </li>
                    <li id="menu-item-172" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-172"> <a href="#section2">Another submenu itm</a> </li>
                </ul>
            </li>
            <li id="menu-item-14" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-14"> <a href="#url2">2nd menu item</a>
                <ul class="sub-menu">
                    <li id="menu-item-168" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-168"> <a href="#section1">short submenu</a> </li>
                    <li id="menu-item-169" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-169"> <a href="#section2">short #2</a> </li>
                </ul>
            </li>
            <li> <a href="#3">3rd main item</a> </li>
        </ul>
    </nav>
</div>

In the comments below the question I wrote "It does not open on hover" :) — trainoasis, Mar 06 '18 at 07:22
@trainoasis you said `it's always open when you are on the parent page` then in inner page the default state ?? — Anzil khaN, Mar 06 '18 at 07:38

Submenu - keep max width of the parent element

3 Answers3