我目前在我正在制作的网页上有这个：
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 的后面，但显示不正确：
作为 web 开发的相对业余爱好者，我不知道如何解决这个问题并获得我想要的结果。另一个问题是我希望突出显示在圆形边框内被掩盖。任何帮助，将不胜感激！