固定的CSS导航栏

Question

固定的CSS导航栏

3

最近，我解决了困扰我一段时间的CSS导航栏问题。现在，我需要将它固定到页面顶部，以便在滚动页面时随之滚动。我知道我需要添加的是 Position: fixed;，但我不知道要在哪里添加。

我的尝试导致文本被固定，但导航栏的背景却没有。非常感谢任何帮助。

我的CSS

#cssmenu ul {
  margin: 0;
  padding: 0;


}
#cssmenu li {
  margin: 0;
  padding: 0;
}
#cssmenu a {
  margin: 0;
  padding: 0;
}
#cssmenu > ul {
  display:table;
  margin:0 auto;
}
#cssmenu ul {
  list-style: none;
}
#cssmenu a {
  text-decoration: none;
}
#cssmenu {
  height: 70px;
  background-color: #232323;
  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);
  width: auto;
  text-align: center;



}
#cssmenu > ul > li {
  float: left;
  margin-left: 15px;
  position: relative;
}
#cssmenu > ul > li > a {
  color: #a0a0a0;
  font-family: Verdana, 'Lucida Grande';
  font-size: 15px;
  line-height: 70px;
  padding: 15px 20px;
  -webkit-transition: color .15s;
  -moz-transition: color .15s;
  -o-transition: color .15s;
  transition: color .15s;
}
#cssmenu > ul > li > a:hover {
  color: #ffffff;
}
#cssmenu > ul > li > ul {
  opacity: 0;
  visibility: hidden;
  padding: 16px 0 20px 0;
  background-color: #fafafa;
  text-align: left;
  position: absolute;
  top: 55px;
  left: 50%;
  margin-left: -90px;
  width: 180px;
  -webkit-transition: all .3s .1s;
  -moz-transition: all .3s .1s;
  -o-transition: all .3s .1s;
  transition: all .3s .1s;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
}
#cssmenu > ul > li:hover > ul {
  opacity: 1;
  top: 65px;
  visibility: visible;
}
#cssmenu > ul > li > ul:before {
  content: '';
  display: block;
  border-color: transparent transparent #fafafa transparent;
  border-style: solid;
  border-width: 10px;
  position: absolute;
  top: -20px;
  left: 50%;
  margin-left: -10px;
}
#cssmenu > ul ul > li {
  position: relative;
}
#cssmenu ul ul a {
  color: #323232;
  font-family: Verdana, 'Lucida Grande';
  font-size: 13px;
  background-color: #fafafa;
  padding: 5px 8px 7px 16px;
  display: block;
  -webkit-transition: background-color 0.1s;
  -moz-transition: background-color 0.1s;
  -o-transition: background-color 0.1s;
  transition: background-color 0.1s;
}
#cssmenu ul ul a:hover {
  background-color: #f0f0f0;
}
#cssmenu ul ul ul {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: -16px;
  left: 206px;
  padding: 16px 0 20px 0;
  background-color: #fafafa;
  text-align: left;
  width: 180px;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
}
#cssmenu ul ul > li:hover > ul {
  opacity: 1;
  left: 190px;
  visibility: visible;
}
#cssmenu ul ul a:hover {
  background-color: #cc2c24;
  color: #f0f0f0;
}

- user2957819

仅凭您的CSS，我们很难帮助您解决问题。请发布一些HTML代码。如果您能创建一个JSFiddle，那就更好了！ - service-paradis

试着使用浏览器代码检查器（firebug等）进行一些测试。 - Nick Louloudakis

2个回答

0

我假设你的 #cssmenu 是你的主导航容器，或许可以尝试一下

    #cssmenu {
      position: absolute;   
   }

- ElvinD

1

"position:fixed;" 是一个更合适的答案，因为他想要在滚动时保持固定。 - service-paradis

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Farmer Joe · Accepted Answer

你应该将它添加到所有导航项的整体容器中，从你的 css 文件中我猜测这是带有 id="cssmenu" 的 DOM 元素。此外，你还需要添加 top: 0px; 来确保它保持在 0 位置。

编辑:

css:

#my-nav-bar {
    position: fixed;
    top: 0px;
}

html:

<body>
    <div id="my-nav-bar">
        <!-- nav bar content -->
    </div>
    <!-- page content -->
</body>

现在具有id="my-nav-bar"的

将保持固定在窗口顶部。

查看我刚制作的JSFiddle示例