将UL与祖父母UL对齐

Question

我一直试图让这个工作一段时间没有成功。

我有一个多级导航，我想将所有儿童UL与主要父母/祖父母UL对齐。

现在结构是这样的：

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

所以，我有它设置所以第二个子菜单显示在悬停，我能够得到其祖父母UL的第二子菜单大小：

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

并且其位置设置为绝对值，顶部：0，左侧：100％，显示：内联块...

但是我想将所有第二个子菜单与祖父母的顶部对齐。

现在我有：

但是，我想得到这样的东西：

感谢帮助。

Answer 1

这里你的主要问题是CSS部分，你用来定位子菜单的亲戚，你不需要JS部分，你可以得到你的结果，如果你只是避免relative是在li上，只需确保您在主ul上拥有该广告，请查看以下代码段：

＆＃13;

＆＃13;

.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
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

注意：

这是一个在li元素上具有相对位置的片段，因此您可以像实际屏幕截图一样查看其工作原理是错误的：

＆＃13;

＆＃13;

.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
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;