<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;
}
正如你可以在小提琴看到,在懸停樣式不應用於列表項的空間.. !
我想上應用類似下面
但有在雙方沒有空間懸停風格,也作爲一個問題懸停文字顯示白色,文字不可見,the fiddle of this part
我應該編輯哪些部分?
哪種風格不適用?你正在使用哪種瀏覽器? – stackErr
@stackErr風格正在應用,但它並沒有佔用左右邊界,對不起我的英語 –