css - 导航栏中的滑动突出显示

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

这是一个 fiddle 。 http://jsfiddle.net/57VC8/1/

我做了什么:

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