Höhe und Funktionalität der Navigationsleiste

Question

Ich möchte eine Navigationsleiste erstellen, die oben auf meiner Webseite platziert wird und sich daran festhält, egal wo ich blättern kann, aber sie wird immer gefangen und verschwindet, wenn ich wegscrolle?

Nicht nur das, aber das ist, was passiert, wenn ich den Mauszeiger über sie:

Ist es möglich, nur haben auch die dunkleren Hintergrund der tatsächlichen schwarzen Balken füllen es im Inneren sitzt?

Dies ist der Ausschnitt aus dem eigenen Stylesheet auch:

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

Alle Hilfe wird sehr geschätzt! Das erste Mal mit CSS herumspielen!

EDIT:

Hier ist der HTML-Snippet, die diesen Header

<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

Fix die Header ... nicht das navbar oder das Menü erstellt.

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>