Question

我这里有问题。我正在使用wordpress而且我很困惑。如何在导航栏后面粘贴背景？我激活了LowerMedia Sticky.js菜单的插件，然后我想更改导航栏背景颜色。我尝试在background: #000;中添加#navigation。看起来没问题，但是当我向下滚动时，导航背景不会移动。只有移动的导航文本。我尝试将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

如果您希望颜色/图像显示在整个菜单块的后面，那么您将背景本地化为太靠近锚元素。

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

如何在导航栏后面留下背景？

1 个答案: