問題 - 菜單懸停CSS

<div id="menu"> 
       <ul> 
        <li><a href="index.html">HOME</a></li> 
        <li ><a href="about_us.html">ABOUT US</a></li> 
        <li><a href="products.html">PRODUCTS</a></li> 
        <li><a href="services.html">SERVICES</a></li> 
        <li><a href="enquiry.php">ENQUIRY</a></li> 
        <li><a href="contact_us.html">CONTACT US</a></li> 
       </ul> 
      </div>

CSS問題 - 菜單懸停CSS

#menu { 
    width: 960px; 
    padding: 0px; 
    margin: 5px 0px 5px 0px; 
    float: left; 
    background-color: #a51c30; 
    color: #FFFFFF; 
    font-family: "Times New Roman", Times, serif; 
    font-size: 16px; 
} 
    #menu ul { 
     list-style-type: none; 
     margin: 0px; 
     padding:0px; 
} 

     #menu ul li { 
      margin: 0px 0px 0px 0px; 
      width: 130px; 
      text-align: center; 
      float: left; 
      display:block; 
     } 

      #menu ul li a { 
       text-decoration: none; 
       color: #FFFFFF; 
       font-family: "Times New Roman", Times, serif; 
       font-size: 16px; 

      } 

#menu li a:hover { 
     background-color:#FFFFFF; 
     color:#a51c30; 
     border-top:1px solid black; 
     border-left:1px solid black; 
     border-right:1px solid black; 
     padding:10px; 
     display:block; 


    }

Fiddle

正如你可以在小提琴看到，在懸停樣式不應用於列表項的空間.. ！

enter image description here

我想上應用類似下面

enter image description here

但有在雙方沒有空間懸停風格，也作爲一個問題懸停文字顯示白色，文字不可見，the fiddle of this part

我應該編輯哪些部分？

來源

2014-02-07 Amarnath Balasubramanian

哪種風格不適用？你正在使用哪種瀏覽器？ – stackErr

@stackErr風格正在應用，但它並沒有佔用左右邊界，對不起我的英語 –

我增加了一個固定的li代替a，這樣

#menu li:hover a{ 
    color:#a51c30;  
} 

#menu li:hover{ 
    background-color:#FFFFFF; 
    color:#a51c30; 
    padding: 9px; 
    border: 1px solid black; 
}

還增加了一些調整。看看小提琴：http://jsfiddle.net/5sJ6D/15/

來源

2014-02-07 19:23:20 ochi

如何去除家中左側的空間？ –

我更新了小提琴http://jsfiddle.net/5sJ6D/16/ - 您需要爲'#menu ul'刪除'margin：auto;'，並從'＃menu'中刪除指定的寬度 – ochi

如果這是你的意思，你應該使用這個#menu li:hover而不是#menu li a:hover。嘗試下次更清楚。

來源

2014-02-07 18:54:57 user1627363

問題 - 菜單懸停CSS

回答

相關問題