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

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

1 个答案: