Question

我使用table属性安排了主菜单导航。在li标签内部有锚标签。并使用“after”方法为锚标记提供下拉箭头。现在我遇到一个问题，我的锚标记没有其父 li full height ，它有display：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>

孩子没有取表格单元父高度的标签

1 个答案: