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

Question

我使用 table 属性安排了主菜单导航。在 li 标签内有锚标签。并使用“after”方法为锚标记提供了下拉箭头。现在我面临一个问题，即我的锚标签 not take 其父 li full height 具有显示：table-cell。而且我不能将位置绝对设置为我的锚，因为我已经设置了位置：相对于其后的显示箭头。 我需要我的锚标签来获得完整高度的原因是。我的菜单可能有两行，例如 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>