在這個水平菜單一個有趣的問題CSS

Question

我這樣做「很容易橫向菜單」但我現在面臨一個有趣的問題......

不知道最簡單的路怎麼來解決這個問題：如果我應該使用css或jquery（也許太矯枉過正）

你有HERE一個前。 ：我想要做的就是懸停在每個鏈接上並隱藏它的邊框。目前，我在懸停區域（邊界）獲得了一些額外的寬度，如果你在跟蹤我，那麼對於導航裏面的2鏈接它會變得更加複雜。

我不知道如果我想使用圖片的文本和邊框和隱藏他們每次我懸停他們或時間？

任何雖然我應該如何實現這一設計？

謝謝

<div class="Main"> 

     <ul> 
      <li><a><p class="borders">film</p></a></li> 
      <li><a><p class="borders">film</p></a></li> 
      <li><a><p class="borders">film</p></a></li> 
      <li><a><p class="borders">film</p></a></li> 

     </ul> 




    </div> 

的CSS：

<style> 

     .Main{ width: 900px; margin: auto;} 
     .Main ul{ overflow: hidden;} 
     .Main ul li{ float: left; list-style: none} 
     .Main ul li a{ 
      width: 100px; 
      height: 100px; 
      background: #ffa07a; 
      display: block; 
     } 

     .Main ul li a p{ 
      text-align: center; 
      position: relative; 
      top:40px; 

     } 
     .Main ul li a:hover{ background: #7cfc00; } 
     .borders{ 
      border-right: 2px solid #7cfc00; 

     } 

    </style> 

Answer 1

，如果我理解正確的問題，但是這是你想要什麼不知道？

http://jsfiddle.net/RGd2P/1/

.Main ul li a:hover{ 
    background: #7cfc00; 
    margin-left:-2px; 
    width:101px; 
    padding-left:1px; 
} 

Answer 2

只需添加p標籤的懸停標籤之後......這

.Main ul li a p:hover{ background: #7cfc00;width: 100px; } 

感謝

Answer 3

你沒有得到額外的寬度等。這是CSS3 standard behavior：

'left' 
+ 'margin-left' 
+ 'border-left-width' 
+ 'padding-left' 
+ 'width'     /* 100 px, bad - use 98 instead */ 
+ 'padding-right' 
+ 'border-right-width'  /* +2 px   +2 */ 
+ 'margin-right' 
+ 'right' 
           =    = 
= width of containing block /* 102 px,   100 */

如果要設置的包含塊到一個固定的大小，然後使用上面的公式來計算它的寬度。另外，儘量保持你的標記儘可能的簡單，並保持語義正確（demo）：

<div class="Main"> 
    <ul> 
     <li><a>film</a></li> 
     <li><a>film</a></li> 
     <li><a>film</a></li> 
     <li><a>film</a></li> 
    </ul> 
</div> 

.Main{ 
    width: 900px; 
    margin: auto; 
} 
.Main ul{ 
    width:400px; 
    margin:auto; 
    list-style: none; 
} 
.Main ul li{ 
    display: block; 
    float: left; 
    width: 98px; 
    height: 100px; 
    background: #ffa07a;  
    text-align: center; 
    border-right: 2px solid #7cfc00; 
} 

.Main ul li a{  
    display:block; 
    margin-top:40%; 
} 
.Main ul li:hover{ background: #7cfc00; } 

Answer 4

隨着這裏的幾個技巧和那裏你可以實現它。我擺脫了p標籤並重新編寫了css代碼。看看http://jsfiddle.net/elclanrs/k4mcr/