如何实现等高菜单列表项？

Question

我尝试使用 flex，但项目仍然无法拉伸项目的最大高度。

ul.sub-menu-nav {
    padding:0px;
    height:100%;
    -ms-box-orient: horizontal;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: stretch; 
    align-items: stretch;

    flex-direction: row;
    -webkit-flex-direction: row;
    margin:0px;
}
 li.sub-menu-top {
    height:100%;
}

<ul class="sub-menu-nav">
    <li class="sub-menu-top" data-parent="0" data-id="3">
        <h3><a href="#">Advertising</a></h3>
        <ul class="sub-sub-menu">
            <li><a href="#">Departments</a></li>
            <li><a href="#">Previous Commercials</a></li>
            <li><a href="#">Current Commercials</a></li>
            <li><a href="#">TechAnim</a></li>
        </ul>
    </li>
    <li class="sub-menu-top" data-id="16" data-parent="3">
        <h3><a href="#">Training</a></h3>
        <ul class="sub-sub-menu">
            <li><a href="#">Academy</a></li>
            <li><a href="#">All Tutorials</a></li>
            <li><a href="#">Pipeline</a></li>
            <li><a href="#">Digital Tutors</a></li>
            <li><a href="#">Intranet</a></li>
            <li><a href="#">Training</a></li>
            <li><a href="#">Tutorials</a></li>
            <li><a href="#">Feedback</a></li>
        </ul>
    </li>
</ul>

JSFiddle link

合理的 table 行和 table 单元格也未显示相同的高度。

Answer 1

您是否要使灰色左边框的高度相同？这是我的解决方案：

ul.sub-menu-nav {
  display: flex;
  margin: 0px;
  padding: 0px;
  list-style: none;
}

li.sub-menu-top {
  padding: 0px 20px;
  border-left: 1px gray solid;
}

ul.sub-sub-menu {
  margin: 0px;
  padding: 0px;
  list-style: none;
}

ul.sub-sub-menu li {
  padding: 4px 20px;
}

ul.sub-sub-menu li a {
  color: #000;
  text-decoration: none;
}

<ul class="sub-menu-nav">
  <li class="sub-menu-top">
    <h3><a href="#">Advertising</a></h3>
    <ul class="sub-sub-menu">
      <li><a href="#">Departments</a></li>
      <li><a href="#">Previous Commercials</a></li>
      <li><a href="#">Current Commercials</a></li>
      <li><a href="#">TechAnim</a></li>
    </ul>
  </li>
  <li class="sub-menu-top">
    <h3><a href="#">Training</a></h3>
    <ul class="sub-sub-menu">
      <li><a href="#">Academy</a></li>
      <li><a href="#">All Tutorials</a></li>
      <li><a href="#">Pipeline</a></li>
      <li><a href="#">Digital Tutors</a></li>
      <li><a href="#">Intranet</a></li>
      <li><a href="#">Training</a></li>
      <li><a href="#">Tutorials</a></li>
      <li><a href="#">Feedback</a></li>
    </ul>
  </li>
</ul>

如何实现等高菜单列表项？

How do I achieve equal-height menu list items?

html

css

flexbox