在导航栏中滑动突出显示

Question

我目前在我正在制作的网页上有这个：

HTML

<div id="pageHeader">
    <nav id="siteNav">
        <ul>
            <li id="currentNavTab"><a href="index.php"><span>Home</span></a></li>
            <li><a href="services.php"><span>Services</span></a></li>
            <li><a href="gallery.php"><span>Gallery</span></a></li>
            <li class="LastNavTab"><a href="contact.php"><span>Contact</span></a></li>
        </ul>
    </nav>
</div>

CSS

nav#siteNav {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}

nav#siteNav ul {
padding: 0;
background-image: url('NavTabsBG.jpg');
box-shadow: inset 0px 2px 8px 2px rgba(0, 0, 0, 0.4);
border-radius: 8px;
}

nav#siteNav li {
display: inline;
width: 240px;
padding-left: 50px;
padding-right: 50px;
}

nav#siteNav a {
display: inline-block;
padding: 10px;
color: rgb(255, 235, 200);
font-size: 36px;
text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.6);
}

代码结果如下：

我想拥有它，以便当前选中的选项卡具有突出显示，可以是位图或使用背景渐变生成;像这样的样机：

我遇到布局问题。我试图把背景放在li的背后，但是没有正确显示：

作为网络开发的相对业余爱好者，我不知道如何解决这个问题并得到我想要的结果。另一个问题是我希望突出显示在圆形边框内被遮盖。任何帮助将不胜感激！

Answer 1

这是一个小提琴。 http://jsfiddle.net/57VC8/1/

我做了什么：

1. 在li上设置显示内联块。为什么？将内联块或块（具有其中一个显示的元素）放在内联元素中可能会给你一些难以理解的问题。
2. 设置a元素上的所有宽度和填充，而不是li上的。{/ li>
3. 在当前选定的链接中添加了“当前”类，您可以通过该链接应用所需的任何样式。