滑动突出显示导航栏

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); 
} 

的代码产生类似这个：

我想这样做，以便当前选定的选项卡采用高亮显示，可以是位图或使用背景渐变生成;这样的样机：

我在与布局的问题。我试图把后面的李的背景，但没有正确显示：

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

Answer 1

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

我做什么：对李的

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