导航栏高度和功能

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

修复标题...而不是导航栏或菜单。

＆＃13;

＆＃13;

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 */
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;