修复 CSS 导航栏答案

【问题标题】：Fixed CSS Navigation Bar修复 CSS 导航栏
【发布时间】：2013-11-05 23:43:56
【问题描述】：

我最近解决了一个困扰我一段时间的 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;
}

【问题讨论】：

只有你的css，真的很难帮你。请张贴一些html。如果你创建一个jsfiddle会更好！
使用浏览器代码检查器（萤火虫等）尝试一下。

标签： html css navbar

【解决方案1】：

您应该将它添加到所有导航项目的整体容器中，从您的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>

现在div 和id="my-nav-bar" 将固定在窗口顶部。

看到这个JSFiddle Example我刚做的

【讨论】：

我不太清楚我是怎么做的，我对 Css 还不是很先进 O.o
两个答案似乎都很好，但现在我的导航栏已经达到 50% 宽度 O.o
@user2957819 尝试添加width: 100%，应该确保它填满整个顶部。请参阅我添加到答案中的JSFiddle。
@user2957819 没问题！

【解决方案2】：

我假设你的#cssmenu 是你的主要导航容器，不妨试试

    #cssmenu {
      position: absolute;   
   }

【讨论】：

位置：固定；将是一个更合适的答案，因为他想在滚动时保持固定。