html - CSS 翻转导航

Question

我还没有真正做过背景导航滚动，我通常只是在滚动后更改文本的颜色。但是，我现在尝试这样做，但似乎做不对。

我正在尝试使用 CSS 来完成这一切，因为我相信有一种方法，但我确实看到很多其他人使用 sprite 和图像翻转。哪种方式最好？我可能最终会在我的网站上放很多图片，所以我尽量远离它们，所以我自己正在严格考虑 CSS。有办法吗？

This is my website

CSS

#main-navigation { width: 100%; height: 100px; background: url(../img/NAV-BG.jpg) top center no-repeat; text-transform: uppercase; font-size: 1em; letter-spacing: 1px; line-height: 90px; /*border: 1px solid #000;*/ }
#main-navigation ul { width: 860px; list-style: none; margin: 0 auto; text-align: center;}
#main-navigation li { float: left ;margin-left: 30px; }
#main-navigation li a { display: block; text-decoration: none; color: #000; }
#main-navigation li a:hover { color: #c7bd89; background-color: #900; width: 120%; height: 30px; -moz-border-radius: 5px; border-radius: 5px; margin: 0 auto; margin-top: 20px;}

HTML

<nav id="main-navigation">
           <ul id="main-nav-left">
               <li class="current"><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Current Season</a></li>
               <li><a href="#">Past Seasons</a></li>
               <li><a href="#">Contact</a></li>
               <li><a href="#">Partners/Sponsors</a></li>
           </ul>
  </nav>

但我希望它看起来像这样

我错过了什么？

Answer 1

使用这个

#main-navigation li a:hover {
    color: #c7bd89;
    background-color: #900;
    width: 120%;
    line-height: 30px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin-top: 30px;
}

所有的问题是你定义了一个高度......你应该定义一个行高而不是它会完美地工作......但我仍然可以在填充和边距方面找到改进的空间。