html - 子标签不采用表格单元格父高度

Question

我使用表格属性安排了主菜单导航。在 li 标签内有 anchor 标签。并使用“after”方法为 anchor 标记提供下拉箭头。现在我面临一个问题，我的 anchor 标记没有它的父li full height，它有display: table-cell。而且我无法将位置绝对设置为我的 anchor ，因为我已经设置了position:relative于其后的显示箭头。我需要我的 anchor 标签来获得全高的原因是。我的菜单可能有两行，例如 1.XXxxxxxxxx xxxxx 2.xxxxxx 所以第一个链接将出现两行，因为宽度不够。第二个将以单行形式出现。

ul.tb-megamenu-nav.nav{
   display: table;
   width: 100%;
   table-layout: fixed;
   position: relative;
}

.tb-megamenu .nav > li.level-1 {
    vertical-align: middle;
    min-height: 48px;
    float: none;
    display: table-cell;
    min-width: 16.56686626746507%;
    position: static;
    list-style: none;
}

.tb-megamenu .nav > li > a {
    background-color: transparent;
    padding: 8px 7%;
    text-align: center;
    color: #fff;
    border: 0;
    position: relative;
    cursor: pointer;
 }

.tb-megamenu .tb-megamenu-nav > li.dropdown > a:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: 40px;
    left: 50%;
    margin-left: -14px;
    border-top: 14px solid #0092d0;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    z-index: 999999;

Answer 1

* {
  outline: 1px solid blue;
}
ul.tb-megamenu-nav.nav {
  display: table;
  width: 100%;
  table-layout: fixed;
  position: relative;
}
.tb-megamenu .nav > li.level-1 {
  vertical-align: middle;
  min-height: 48px;
  float: none;
  display: table-cell;
  min-width: 16.56686626746507%;
  position: relative;
  list-style: none;
}
.tb-megamenu .nav > li > a {
  background-color: transparent;
  padding: 8px 7%;
  text-align: center;
  color: #fff;
  border: 0;
  position: relative;
  cursor: pointer;
  display: block;
}
.tb-megamenu .tb-megamenu-nav > li.dropdown > a:after {
  content: "➤";
  width: 0;
  height: 0;
  position: absolute;
  top: 40px;
  left: 50%;
  margin-left: -14px;
  border-top: 14px solid #0092d0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  z-index: 999999;
}

<ul class="tb-megamenu-nav nav">
  <li class="level-1"></li>
  <li class="dropdown">

    <a href='#'></a>

  </li>