使导航菜单跨越浏览器的长度

Question

我试图让我的导航菜单跨越我的博客的整个长度。现在它在右侧偏离中心并且有点太短了。如何让它变长？

此外，您会注意到我的导航菜单不在页面的最顶部，而这正是我想要的位置。我该如何解决这个问题？

不是这样的！我的导航菜单是粘性的，但是当您滚动过去时……它会被扔到页面的左侧。怎么办？

提前感谢您的帮助！

以下是部分代码。这里是网站：http://www.studywithstyleblog.com

<div id="navigationbar">
#cssnav { 
border: 0px;
margin: 0px;
padding: 0px;
width: auto;
font: $(tabs.font); /* Template Designer - Change Font Type, Size, Etc */
color: $(tabs.text.color); /* Template Designer - Change Font Size */
}
#cssnav ul {
#cssnav ul {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Menu Background */
height: 40px; /* Change Height of Menu */
list-style: none;
text-align: center;
margin: 0px;
padding: 0px;
}
#cssnav li {
float: none; /* none = centre */
display: inline-block;
padding: 0px;
}
#cssnav li a {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Menu Background */
display: block;
margin: 0px;
text-align: center;
font: $(tabs.font); /* Template Designer - Change Font Type, Size, Etc */
text-decoration: none;
}
#cssnav > ul > li > a {
color: $(tabs.text.color); /* Template Designer - Change Font Color */
}
#cssnav ul ul a { 
color: $(tabs.text.color); /* Template Designer - Change Color */
}
#cssnav li > a:hover, #cssnav ul li:hover {
color: $(tabs.selected.text.color); /* Template Designer - Change Font Color on Hover */
background-color: $(tabs.selected.background.color); /* Template Designer - Change Font Background on Hover */
text-decoration: none;
}
#cssnav li ul {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Menu Background */
display: none;
height: auto;
padding: 0px;
margin: 0px;
border: -5px;
position: absolute;
width: 300px; /* Change Width Of DropDown Menu */
z-index:9999;
}
#cssnav li:hover ul {
}
#cssnav li li {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Background */
display: block;
float: none;
margin: 0px;
padding: 0px;
width: 300px; /* Change Width Of DropDown Menu */
}
#cssnav li:hover li a {
background: #FFFFFF; /* Template Designer - Change Background of Link on Hover */
}
#cssnav li ul a {
display: block;
height: auto;
margin: 0px;
padding: 10px;
text-align: left;
}
#cssnav li ul a:hover, #cssnav li ul li:hover > a {
color: $(tabs.selected.text.color); /* Template Designer - Change Text Color on Hover */
background-color: $(tabs.selected.background.color); /* Template Designer - Change Background on Hover */
border: 0px;
text-decoration: none;
}
/*-------- Begin Drop Down Menu -------*/

Answer 1

要修复导航栏偏移的问题，请更改 css 规则 #menubar 并摆脱宽度规则。

#menubar {
  background: #000000;
  /* width: 1120px; */
  color: #FFF;
  margin: 0px;
  padding: 0;
  position: relative;
  border-top: 0px solid #000000;
  height: 45px;
}

要使导航栏始终位于页面顶部，请将以下样式属性添加到sticknav 元素。

<sticknav style="position: fixed;top: 0px;">