導航欄的高度和功能

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！

編輯：

這裏是HTML的創建此頭

<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

修正了頭......沒有導航欄或菜單中的片段。

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>