1

I have been trying to get this to work for a while with no success.

I have a multi-level navigation and I would like to align all child UL's with is main parent/grandparent UL.

right now the structure is something like this:

<ul class="first-menu">
      <li class="has-children">
        <a href="#">Page 1
          <span class="arrow arrow-down"></span>
        </a>
        <ul class="submenu first-submenu">
          <li><a href="#">Menu 1</a></li>
          <li class="has-children">
            <a href="#">Menu 2
              <span class="arrow arrow-down"></span>
            </a>
            <ul class="submenu second-submenu">
              <li><a href="#">Sub Menu 1</a></li>
              <li><a href="#">Sub Menu 2</a></li>
              <li><a href="#">Sub Menu 3</a></li>
              <li><a href="#">Sub Menu 4</a></li>
              <li><a href="#">Sub Menu 5</a></li>
              <li><a href="#">Sub Menu 6</a></li>
              <li><a href="#">Sub Menu 7</a></li>
            </ul>
          </li>
          <li class="has-children">
            <a href="#">Menu3
              <span class="arrow arrow-down"></span>
            </a>
            <ul class="submenu second-submenu">
              <li><a href="#">Sub Menu 1</a></li>
              <li><a href="#">Sub Menu 2</a></li>
              <li><a href="#">Sub Menu 3</a></li>
              <li><a href="#">Sub Menu 4</a></li>
              <li><a href="#">Sub Menu 5</a></li>
              <li><a href="#">Sub Menu 6</a></li>
              <li><a href="#">Sub Menu 7</a></li>
            </ul>
          </li>
          <li class="has-children">
            <a href="#">Menu 4
              <span class="arrow arrow-down"></span>
            </a>
            <ul class="submenu second-submenu">
              <li><a href="#">Sub Menu 1</a></li>
              <li><a href="#">Sub Menu 2</a></li>
              <li><a href="#">Sub Menu 3</a></li>
              <li><a href="#">Sub Menu 4</a></li>
              <li><a href="#">Sub Menu 5</a></li>
              <li><a href="#">Sub Menu 6</a></li>
              <li><a href="#">Sub Menu 7</a></li>
            </ul>
          </li>
          <li class="has-children">
            <a href="#">Menu 5
              <span class="arrow arrow-down"></span>
            </a>
            <ul class="submenu second-submenu">
              <li><a href="#">Sub Menu 1</a></li>
              <li><a href="#">Sub Menu 2</a></li>
              <li><a href="#">Sub Menu 3</a></li>
              <li><a href="#">Sub Menu 4</a></li>
              <li><a href="#">Sub Menu 5</a></li>
              <li><a href="#">Sub Menu 6</a></li>
              <li><a href="#">Sub Menu 7</a></li>
            </ul>
          </li>
          <li class="has-children">
            <a href="#">Menu 6
              <span class="arrow arrow-down"></span>
            </a>
            <ul class="submenu second-submenu">
              <li><a href="#">Sub Menu 1</a></li>
              <li><a href="#">Sub Menu 2</a></li>
              <li><a href="#">Sub Menu 3</a></li>
              <li><a href="#">Sub Menu 4</a></li>
              <li><a href="#">Sub Menu 5</a></li>
              <li><a href="#">Sub Menu 6</a></li>
              <li><a href="#">Sub Menu 7</a></li>
            </ul>
          </li>
          <li class="has-children">
            <a href="#">Menu 7
              <span class="arrow arrow-down"></span>
            </a>
            </li>
          <li class="has-children">
            <a href="#">Menu 8
              <span class="arrow arrow-down"></span>
            </a>
            <ul class="submenu second-submenu">
              <li><a href="#">Sub Menu 1</a></li>
              <li><a href="#">Sub Menu 2</a></li>
              <li><a href="#">Sub Menu 3</a></li>
              <li><a href="#">Sub Menu 4</a></li>
              <li><a href="#">Sub Menu 5</a></li>
              <li><a href="#">Sub Menu 6</a></li>
              <li><a href="#">Sub Menu 7</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li class="has-children">
        <a href="#">Page 2
          <span class="arrow arrow-down"></span>
        </a>
        <ul class="submenu first-submenu">
          <li><a href="#">Menu 1</a></li>
          <li><a href="#">Menu 2</a></li>
          <li><a href="#">Menu 3</a></li>
          <li><a href="#">Menu 4</a></li>
          <li><a href="#">Menu 5</a></li>
          <li><a href="#">Menu 6</a></li>
          <li><a href="#">Menu 7</a></li>
        </ul>
      </li>
      <li class="has-children">
        <a href="#">Page 3
          <span class="arrow arrow-down"></span>
        </a>
        <ul class="submenu first-submenu" value="hide/show">
          <li><a href="#">Menu 1</a></li>
          <li><a href="#">Menu 2</a></li>
          <li><a href="#">Menu 3</a></li>
          <li><a href="#">Menu 4</a></li>
          <li><a href="#">Menu 5</a></li>
        </ul>
      </li>
      <li><a href="#">Page 4</a></li>
    </ul>

so, I have it setup so the second submenu shows on hover, I was able to get the second-submenu size to its grandparent UL with this:

 $('.first-menu').each(function(){
          $(this).find('ul.second-submenu')
          .css('min-height', $(this).outerHeight(true));
     });

and its position is set to absolute, top: 0 , and left: 100%, display: inline-block ...

but I would like to align all the second-submenu uls with the grandparent ul up top.

right now I have:

enter image description here

But, I would like to get something like this:

enter image description here

Appreciate the help.

Lucky500
  • 677
  • 5
  • 17
  • 31
  • 3
    Post your CSS please. – Michael Coker Apr 19 '17 at 16:50
  • did you checked [this post](http://stackoverflow.com/questions/3714628/jquery-get-the-location-of-an-element-relative-to-window)? I would suggest `vertical-align: top;` for your submenu – Felix Haeberle Apr 19 '17 at 16:52
  • I apologize, just got it to work! As I was posting the CSS for @MichaelCoker, I realized that I had flex-direction: column there ... as I deleted, it worked! – Lucky500 Apr 19 '17 at 17:01
  • there are whole sites dedicated to menu/navigation css and approaches – charlietfl Apr 19 '17 at 17:12
  • 1
    @Lucky500 that's one of the reasons it's important to actually reproduce the problem in the post. When you're re-constructing it, half the time you'll figure out or see whatever it was you missed. glad you got it! – Michael Coker Apr 19 '17 at 17:14
  • I was trying to save sometime, but you are absolutely right. – Lucky500 Apr 19 '17 at 17:16

1 Answers1

1

Here your main problem is the CSS part where the relative parent you are using to position the submenu, you don't need the JS part and you can get your result if you just avoid the relative be on the li and just ensure you have it on the main ul, check this snippet:

.first-menu {
  position: relative;
  height: 300px;
  width: 150px;
  background: orange;
}

.submenu {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  width: 100%;
  height: 100%;
  background: orange;
}

.has-children:hover>.submenu {
  display: block;
}
li:hover {
  background:green;
}

ul {
  padding: 0;
  list-style: none
}

li {
  line-height: 30px;
  padding: 5px;
  background: tomato
}

a {
  text-decoration: none;
  color: white
}
<ul class="first-menu">
  <li class="has-children">
    <a href="#">Page 1
          <span class="arrow arrow-down"></span>
        </a>
    <ul class="submenu first-submenu">
      <li><a href="#">Menu 1</a></li>
      <li class="has-children">
        <a href="#">Menu 2
              <span class="arrow arrow-down"></span>
            </a>
        <ul class="submenu second-submenu">
          <li><a href="#">Sub Menu 1</a></li>
          <li><a href="#">Sub Menu 2</a></li>
          <li><a href="#">Sub Menu 3</a></li>
          <li><a href="#">Sub Menu 4</a></li>
          <li><a href="#">Sub Menu 5</a></li>
          <li><a href="#">Sub Menu 6</a></li>
          <li><a href="#">Sub Menu 7</a></li>
        </ul>
      </li>
      <li class="has-children">
        <a href="#">Menu3
              <span class="arrow arrow-down"></span>
            </a>
        <ul class="submenu second-submenu">
          <li><a href="#">Sub Menu 1</a></li>
          <li><a href="#">Sub Menu 2</a></li>
          <li><a href="#">Sub Menu 3</a></li>
          <li><a href="#">Sub Menu 4</a></li>
          <li><a href="#">Sub Menu 5</a></li>
          <li><a href="#">Sub Menu 6</a></li>
          <li><a href="#">Sub Menu 7</a></li>
        </ul>
      </li>
      <li class="has-children">
        <a href="#">Menu 4
              <span class="arrow arrow-down"></span>
            </a>
        <ul class="submenu second-submenu">
          <li><a href="#">Sub Menu 1</a></li>
          <li><a href="#">Sub Menu 2</a></li>
          <li><a href="#">Sub Menu 3</a></li>
          <li><a href="#">Sub Menu 4</a></li>
          <li><a href="#">Sub Menu 5</a></li>
          <li><a href="#">Sub Menu 6</a></li>
          <li><a href="#">Sub Menu 7</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="has-children">
    <a href="#">Page 2
          <span class="arrow arrow-down"></span>
        </a>
    <ul class="submenu first-submenu">
      <li><a href="#">Menu 1</a></li>
      <li><a href="#">Menu 2</a></li>
      <li><a href="#">Menu 3</a></li>
    </ul>
  </li>
</ul>

Note:

Here is a snippet with relative position on the li element so you can see how this works wrong like your actual screenshots:

.first-menu {
  position: relative;
  height: 300px;
  width: 150px;
  background: orange;
}

.submenu {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  width: 100%;
  height: 100%;
  background: orange;
}

.has-children:hover>.submenu {
  display: block;
}

li:hover {
  background: green;
}

ul {
  padding: 0;
  list-style: none
}

li {
  position: relative;
  line-height: 30px;
  padding: 5px;
  background: tomato
}

a {
  text-decoration: none;
  color: white
}
<ul class="first-menu">
  <li class="has-children">
    <a href="#">Page 1
          <span class="arrow arrow-down"></span>
        </a>
    <ul class="submenu first-submenu">
      <li><a href="#">Menu 1</a></li>
      <li class="has-children">
        <a href="#">Menu 2
              <span class="arrow arrow-down"></span>
            </a>
        <ul class="submenu second-submenu">
          <li><a href="#">Sub Menu 1</a></li>
          <li><a href="#">Sub Menu 2</a></li>
          <li><a href="#">Sub Menu 3</a></li>
          <li><a href="#">Sub Menu 4</a></li>
          <li><a href="#">Sub Menu 5</a></li>
          <li><a href="#">Sub Menu 6</a></li>
          <li><a href="#">Sub Menu 7</a></li>
        </ul>
      </li>
      <li class="has-children">
        <a href="#">Menu3
              <span class="arrow arrow-down"></span>
            </a>
        <ul class="submenu second-submenu">
          <li><a href="#">Sub Menu 1</a></li>
          <li><a href="#">Sub Menu 2</a></li>
          <li><a href="#">Sub Menu 3</a></li>
          <li><a href="#">Sub Menu 4</a></li>
          <li><a href="#">Sub Menu 5</a></li>
          <li><a href="#">Sub Menu 6</a></li>
          <li><a href="#">Sub Menu 7</a></li>
        </ul>
      </li>
      <li class="has-children">
        <a href="#">Menu 4
              <span class="arrow arrow-down"></span>
            </a>
        <ul class="submenu second-submenu">
          <li><a href="#">Sub Menu 1</a></li>
          <li><a href="#">Sub Menu 2</a></li>
          <li><a href="#">Sub Menu 3</a></li>
          <li><a href="#">Sub Menu 4</a></li>
          <li><a href="#">Sub Menu 5</a></li>
          <li><a href="#">Sub Menu 6</a></li>
          <li><a href="#">Sub Menu 7</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="has-children">
    <a href="#">Page 2
          <span class="arrow arrow-down"></span>
        </a>
    <ul class="submenu first-submenu">
      <li><a href="#">Menu 1</a></li>
      <li><a href="#">Menu 2</a></li>
      <li><a href="#">Menu 3</a></li>
    </ul>
  </li>
</ul>
Community
  • 1
  • 1
DaniP
  • 37,813
  • 8
  • 65
  • 74