ナビゲーションバーの高さと機能

Question

ウェブページの上部に座ってスクロールしてもスクロールするナビゲーションバーを作成してみましたが、スクロールすると常にキャッチして消えます。

それだけでなく、これは私がそれにカーソルを合わせると何が起こるかです：

、それはまた、唯一の暗い背景には、それが内側に座っている実際の黒いバーを埋めることは可能ですか？

これは、同様に私のスタイルシートからの抜粋です：

body { 
    background-color: #ecf0f1; 
    margin: 0; 
    font-family: Arial; 
} 
header { 
    background-color: #333; 
} 

.navbar { 
    height: 5%; 
    overflow: auto; 
    margin: auto; 
    width: auto; 
    min-height: 60px; 
    top: 0; 
    text-align: center; 
} 

.title { 
    display: block; 
} 

.navbar ul { 
    list-style-type: none; 
    position: fixed; 
    top: 0; 
    padding: 0; 
    overflow: hidden; 
} 

.navbar li { 
    display: inline-block; 
} 

.navbar li a { 
    padding: 25px; 
    display: block; 
    height: 100%; 
    color: white; 
    text-decoration: none; 
} 

/* Change the link color to #111 (black) on hover */ 
.navbar li a:hover { 
    background-color: #111; 
} 

すべてのヘルプは大歓迎です！初めてCSSで遊ぶ！

EDIT：

ここでは、このヘッダ

<link rel="stylesheet" type="text/css" href="style/style.css"> 

    <header> 
     <div class="navbar"> 
      <ul> 
       <li><a href="#home">Home</a></li> 
       <li><a href="#news">About Us</a></li> 
       <li><a href="#contact">Contracts</a></li> 
       <li><a href="#about">Other</a></li> 
      </ul> 
     </div> 
    </header> 

Answer 1

を作成し、HTMLのスニペットは、ヘッダー...ないナビゲーションバーやメニューを修正しています。

body { 
 
    background-color: #ecf0f1; 
 
    margin: 0; 
 
    font-family: Arial; 
 
} 
 
header { 
 
    background-color: #333; 
 
    position: fixed; 
 
    top: 0; 
 
    width: 100%; 
 
} 
 
.navbar {} .title { 
 
    display: block; 
 
} 
 
.navbar ul { 
 
    list-style-type: none; 
 
    padding: 0; 
 
    margin: 0; 
 
    overflow: hidden; 
 
} 
 
.navbar li { 
 
    display: inline-block; 
 
} 
 
.navbar li a { 
 
    padding: 25px; 
 
    display: block; 
 
    height: 100%; 
 
    color: white; 
 
    text-decoration: none; 
 
} 
 
/* Change the link color to #111 (black) on hover */ 
 

 
.navbar li a:hover { 
 
    background-color: #111; 
 
} 
 
body { 
 
    height: 2000px; /* so you can see the header NOT moving */ 
 
}

<header> 
 
    <div class="navbar"> 
 
    <ul> 
 
     <li class="hvr-underline"><a href="#home">Home</a> 
 
     </li> 
 
     <li><a href="#news">About Us</a> 
 
     </li> 
 
     <li><a href="#contact">Contracts</a> 
 
     </li> 
 
     <li><a href="#about">Other</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</header>