2014-02-07 241 views
0
<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

我想上應用類似下面

enter image description here

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

我應該編輯哪些部分?

+0

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

+0

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

回答

2

我增加了一個固定的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/

+0

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

+0

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

1

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