滑動突出顯示導航欄

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. 爲當前選定的鏈接添加了一個「當前」類，通過它可以應用您想要的任何樣式。