css - 如何在导航栏后面贴一个背景？

Question

我这里有个问题。我正在使用 wordpress，我很困惑。如何将背景贴在导航栏后面？我激活了 LowerMedia Sticky.js 菜单的插件，然后我想更改我的导航栏背景颜色。我尝试在 #navigation 中添加一个 background: #000;。看起来不错，但是当我向下滚动时，导航背景没有移动。只有导航文本移动了。我尝试将 background: #000; 移动到 #navigation .sf-menu a 但背景只出现在文本周围，即使它在我滚动时随文本移动向下。我不知道现在该怎么办。请帮我。先谢谢了。

这是我的网站:vitraprawira.net

这是我最终的导航栏 CSS 代码:

/* Main Navigation

================================================== */
/*hide responsive nav*/

#top-bar .selector, #navigation .selector { display: none; }

/*core*/

.sf-menu, .sf-menu * { margin: 0; padding: 0; list-style: none; }

.sf-menu { line-height: 1.0 }

.sf-menu ul { position: absolute; top: -999em; width: 180px; }

.sf-menu ul li { width: 100% }

.sf-menu li:hover { visibility: inherit }

.sf-menu li { float: left; position: relative; }

.sf-menu a { display: block; position: relative; }

.sf-menu li:hover ul, .sf-menu li.sfHover ul { left: 0px; top: 30px; z-index: 99; }

ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul { top: -999em }

ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul { left: 180px; top: 1px; }

/*styling*/


#navigation-wrap { position: relative; display: block; }

#navigation { margin-left: 170px; margin-right: auto; position: relative; height: 55px; transparent: none; }

#navigation .sf-menu > li:hover > ul, .sf-menu li.sfHover > ul { top: 50px }

#navigation ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul, ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul { left: 200px; top: 0; }

#navigation .sf-menu a { font-size: 1.000em; height: 55px; line-height: 55px; color: #fff;  background: #000 url("images/vintage.png"); }

#navigation .sf-menu > li > a { border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; }

#navigation .sf-menu li { float: left; position: relative; }

#navigation .sf-menu > li { background: url("images/dash.png") right center no-repeat; margin-right: 20px; padding-right: 20px; }

#navigation .sf-menu > li:last-child { margin: 0; padding: 0; }

#navigation .sf-menu > li > a:hover { color: #fff }

#navigation .sf-menu > .current-menu-item > a { color: #7094DB }

#navigation .sf-menu > li.sfHover > a { color: #fff }

/*drop-down styles*/

#navigation .sf-menu ul { position: absolute; nowhitespace: afterproperty; top: -999em; width: 200px; z-index: 9999; left: 0; border: 1px solid #ddd; box-shadow: 0 0 8px rgba(0,0,0,0.08); }

#navigation .sf-menu ul > li:last-child { -webkit-border-bottom-right-radius: 2px; -webkit-border-bottom-left-radius: 2px; -moz-border-radius-bottomright: 2px; -moz-border-radius-bottomleft: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; }

#navigation .sf-menu ul li { background: #000; border-bottom: 1px solid rgba(0,0,0,0.05); }

#navigation .sf-menu ul li:first-child { border-top: 0 }

#navigation .sf-menu ul li:last-child { border-bottom: 0 }

#navigation .sf-menu ul a { display: block; padding: 10px; color: #fff; height: auto; margin: 0px; border: 0px; line-height: 1.8em; font-size: 0.923em; text-shadow: none; }

#navigation .sf-menu ul li > a:hover { color: #7094DB; background: #2D3B58; }

Answer 1

如果您希望颜色/图像出现在整个菜单 block 的后面，那么您将背景定位得太靠近 anchor 元素。

只需执行此操作:#navigation {background: #ccc;} 或您想要的任何颜色。