ホバリングの問題は、ナビゲーションバーの高さを埋めることがありません

Question

バックグラウンドカラーを上に乗せてナビバーの上部に移動するのは苦労しています。現時点では、テキストだけを強調表示しています。シンプルなものがありますか？私はそれを示すのを助けるために下にjsfiddleを置く。ここで

HTML

<nav> 
    <ul> 
     <li><h1><a id="nav_logo" href="/index.php">This is a Test</a></h1></li> 
     <li><a class="nav_link" href="/index.php">Home</a></li> 
     <li><a class="nav_link" href="/pages/about.php">About</a></li> 
     <li><a class="nav_link" href="#">1</a></li> 
     <li><a class="nav_link" href="#">2</a></li> 
     <li><a class="nav_link" href="#">3</a></li> 
     <li><a class="nav_link" href="#">4</a></li> 
     <li><a class="nav_link" href="#">5</a></li>   
    </ul> 
</nav> 

CSS

nav ul{ 
    list-style: none; 
    background-color: #333; 
    padding: 0.8125rem; 
} 

nav li{ 
    display: inline-block; 
} 

nav a{ 
    text-decoration: none; 
    color: white; 


} 

#nav_logo{ 
    color:#FEBC11; 
    background-color: #333; 
} 

.nav_link{ 
    padding-left: 2rem; 
} 

nav li a:hover{ 
    background-color: black; 
} 

https://jsfiddle.net/mhLjav1a/3/

Answer 1

でなければなりません。

1 - あなたはbackgroundがpadding

background-clip: content-box; 

https://jsfiddle.net/mhLjav1a/6/

を無視するようになりますどの background-clip:content-boxを使用することができます padding-left 2 -

margin-leftに変更することができます。あなたは多くの方法であることに変更することができます

Answer 2

は、ソリューションです：https://jsfiddle.net/mhLjav1a/5/

問題を約パディングました。

.nav_link{ 
    padding-left: 2rem; 
} 

あなたは.nav_linkにpadding-leftを与え、背景が要素の一部としてパディング領域を取るので、これは起こった、

.nav_link{ 
    margin-left: 2rem; 
} 

Answer 3

nav ul{ 
 
    list-style: none; 
 
    background-color: #333; 
 
    padding: 0 25px; 
 
    margin: 0; 
 
} 
 

 
nav li{ 
 
    display: inline-block; 
 
    padding: 20px 0; 
 
} 
 

 
.logo { 
 
    padding: 0; 
 
} 
 

 
nav li:hover{ 
 
    background-color: black; 
 
} 
 

 
nav ul li h1 { 
 
    margin: 0; 
 
} 
 

 
nav a{ 
 
    text-decoration: none; 
 
    color: white; 
 
} 
 

 
#nav_logo{ 
 
    color:#FEBC11; 
 
    background-color: #333; 
 
} 
 

 
.nav_link{ 
 
    margin: auto 10px; 
 
}

<nav> 
 
    <ul> 
 
     <li class="logo"><h1><a id="nav_logo" href="/index.php">This is a Test</a></h1></li> 
 
     <li><a class="nav_link" href="/index.php">Home</a></li> 
 
     <li><a class="nav_link" href="/pages/about.php">About</a></li> 
 
     <li><a class="nav_link" href="#">1</a></li> 
 
     <li><a class="nav_link" href="#">2</a></li> 
 
     <li><a class="nav_link" href="#">3</a></li> 
 
     <li><a class="nav_link" href="#">4</a></li> 
 
     <li><a class="nav_link" href="pages/contact.php">5</a></li>   
 
    </ul> 
 
</nav>

Answer 4

あなたが理解している限り、<li>の高さをnavのサイズと一致させたいと思っていました。

nav li{ 
    display: table-cell; 
    text-align: center; 
} 

に

nav li{ 
    display: inline-block; 
} 

、あなたはホバー効果を作るために<li>年代の両側にパディングを追加する必要があります：それは、uはuはちょうど次を変更する必要がアーカイブしたいものである場合もっとよく見える。

.nav_link{ 
    padding: 1rem; // this was padding-left: 2rem; before 
} 

https://jsfiddle.net/mhLjav1a/10/