0
私はサブナビゲーションで奇妙なバグを解決しようとしています。 3つのナビゲーションがあります。最初の2人はうまくいっていますが、3人目は本当に変です。すべてのリンクにテキストの上に空白（20ピクセルなど）があります。しかし、そのスペースはすでにリンクのように動作します！ <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;}
助けてくれませんでしたが、とにかく感謝します！ここでスクリーンショットです。 '.panel li'の高さを30pxに設定するとどのように見えますか？ http://imgur.com/a/XJqoc –
あなたはフィドルを更新することができますので、さらに手助けすることができます –
フィドルが更新されました。ご覧のとおり、サブサブナビゲーションの「表示：ブロック」は正しくありません。 –