Question

我正在尝试解决子导航中的奇怪错误。有3个导航。前两个工作得很好，但第三个表现得非常奇怪。每个链接上面都有空白区域（如20px）。但是这个空间已经像链接一样工作！当我尝试设置<li>元素的固定高度时，文本位于框下方或覆盖边框。（截图当我将.panel li高度设置为30px - http://imgur.com/a/XJqoc时，它看起来如何。我真的不明白并且无法在CSS中找到错误，这应该是这样做的。对此感到非常沮丧。我将向您展示HTML和CSS。我将感激您的一切帮助，谢谢！在这里弄曲：https://fiddle.jshell.net/7v7m5uuj/6/（甚至没有display: block正常工作......）

HTML：

  <div id="menu">
            <ul class="main">
      <li><a href="#">MAIN NAV</a></li>
      <li><a href="#">MAIN NAV</a></li>
      <li class="showsub"><a href="#">MAIN NAV</a>
        <div class="subnav">
          <ul class="sub">
            <li><a href="#">SUB NAV</a></li>
            <li><a href="#">SUB NAV</a></li>
            <li class="showpanel"><a href="#">SUB NAV</a>
              <div class="subpanel">
                  <ul class="panel">
                    <li><a href="#">SUB SUB NAV</a></li>
                    <li><a href="#">SUB SUB NAV</a></li>
                    <li><a href="#">SUB SUB NAV</a></li>
                    <li><a href="#">SUB SUB NAV</a></li>
                  </ul>
            </li>
            <li><a href="#">SUB NAV</a></li>
            <li><a href="#">SUB NAV</a></li>
            <li><a href="#">SUB NAV</a></li>
          </ul>
      </li>
      <li><a href="#">MAIN NAV</a></li>
      <li><a href="#">MAIN NAV</a></li>
      <li><a href="#">MAIN NAV</a></li>
    </ul>
  </div>

CSS：

#menu {width: 100%; height: 60px; display: block; overflow: hidden; background: #a32c61; color: white;}
#menu ul.main {width: auto; height: 60px; list-style: none; margin: 0 auto; font-size: 12px; font-weight: bold; }
#menu ul.main li {display: inline-block; height: 100%; line-height: 60px;}
#menu ul.main li a {width: 100%; padding-left: 5px; padding-right: 5px; text-align: center; height: 100%; text-decoration: none; color: white; transition: 0.5s; display: inline-block;}
#menu ul.main li a:hover {color: white; background: #555555;}
.subnav {display: none; width: 85%; margin: 0 auto; position: absolute; top: 130px; left: 0; right: 0; height: 45px; z-index: 10000; background-color: #262626; color: white; padding: 5px 20px 5px 20px;}
.subnav ul.sub {width: auto; height: 45px; list-style: none; font-size: 12px; font-weight: bold; line-height: 20px; margin-top: -5px;}
.subnav ul.sub li {display: inline-block; height: 100%;}
.subnav ul.sub li a {width: 100%; text-align: center; text-decoration: none; color: #767676; transition: 0;}
.subnav ul.sub li a:hover {border-bottom: 3px solid #a32c61; background: none !important;}
.showsub:hover .subnav {display: block;}

.subpanel {width: 95%; display: none; position: absolute; top: 47px; left: 0; right: 0; margin: 0 auto; height: auto; min-height: 300px; background-color: rgba(38,38,38,0.85); color: white; padding: 5px 0px; z-index: 99999;}
ul.panel {width: 100%; list-style: none; font-size: 12px; font-weight: bold; line-height: 15px; margin: 0 auto;}
.panel li {display: block; width: 150px; background-color: transparent; margin: 0 auto; border: 1px solid white; padding: 0 !important;}
.panel li a {color: white; width: 100%; margin: 0 auto; height: auto !important; text-decoration: none; border: 0; padding: 0 !important;}
.panel li a:hover {border: 0 !important;}
.showpanel:hover .subpanel {display: block;}

Answer 1

我发现您没有关闭div代码中的ui代码。我在这里更新了一个小提琴https://fiddle.jshell.net/7v7m5uuj/

您可以查看它是否如此。

Answer 2

所以我终于解决了！它从主导航中获取line-height: 60px;。

链接文本上方的空白空间

2 个答案: