Leerraum über dem Link Text

Ich versuche, seltsame Bug in Sub-Navigation zu lösen. Es gibt 3 Navigationen. Die ersten beiden funktionieren gut, aber der dritte verhält sich wirklich komisch. In jedem Link befindet sich ein leerer Bereich (zB 20px) über dem Text. Aber dieser Raum funktioniert schon wie ein Link !! Wenn ich versuche, die feste Höhe des Elements <li> festzulegen, befindet sich der Text unter der Box oder bedeckt die Umrandung. (Screenshot, wie es aussieht, wenn ich .panel li Höhe auf 30px einstellen - http://imgur.com/a/XJqoc) Ich verstehe es wirklich nicht und kann keinen Fehler in CSS finden, die das tun sollte. Ich bin so frustriert darüber. Ich werde Ihnen HTML und CSS davon zeigen. Ich werde jede Hilfe zu schätzen wissen, danke! Fiddle hier: https://fiddle.jshell.net/7v7m5uuj/6/ (und es noch nicht einmal display: block Arbeit richtig ...)Leerraum über dem Link Text

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;}

Quelle

2017-02-20 H Sturma

ich Sie schließen nicht die div gefunden Tags innerhalb der ui Tags. Ich aktualisiere eine Geige hier https://fiddle.jshell.net/7v7m5uuj/

Sie können überprüfen, ob es so aussieht.

Quelle

2017-02-20 08:59:05

hat nicht geholfen .. aber trotzdem danke! Hier ist ein Screenshot, wie es aussieht, wenn ich '.panel li' Höhe auf 30px setze. http://imgur.com/a/XJqoc –

können Sie aktualisieren Geige, so kann weiter helfen –

Fiddle aktualisiert, wie Sie sehen können, gibt es nicht einmal 'display: block' in sub-sub-nav funktioniert einwandfrei ... –

Also ich habe es endlich gelöst! Es wurde line-height: 60px; von der Hauptnavigation genommen.

Quelle

2017-02-20 09:24:19

Leerraum über dem Link Text

Antwort

Verwandte Themen