有與圖像背景CSS懸停麻煩

Question

我有一些麻煩，在網站導航部分是一個列表中的文本...如：

<div class="nav_wrapper"> 
    <ul class="nav"> 
     <li><a href="index.php">HOME</a></li> 
     <li><a href="about.php">ABOUT US</a></li> 
     <li><a href="services.php">SERVICES</a></li> 
     <li class="last"><a href="contact_us.php">CONTACT US</a></li> 
    </ul> 
</div> 

現在我所要做的是懸停後顯示圖像背景;但是當它這樣做時，圖像不會完全顯示......它只包圍文本本身;這是有意義的，因爲我將背景應用於標籤。

我已經嘗試設置寬度&高度通過css標記，但它不起作用。

所以我的問題是如何讓它顯示整個圖像時，他們盤旋？

我現在的CSS低於：

#header .nav_wrapper { 
    float: left; 
    width: 597px; 
    margin: 30px 0 0 50px; 
} 

#header .nav_wrapper .nav { 
    list-style-type: none; 
    list-style-image: none; 
} 

#header .nav_wrapper li { 
    display: inline; 
    width: 72px; 
    height: 23px; 
    font-family: "Zurich Cn BT", Tahoma; 
    font-size: 12px; 
    margin-right: 15px; 
} 

ul.nav li a, ul.nav li a:visited, ul.nav li a:focus { 
    color: #764422; 
    text-decoration: none;  
} 

ul.nav li a:hover, ul.nav li a:active { 
    color: #fff; 
    text-decoration: none; 
    background-image: url(../images/nav-bg.png); 
} 

#header .nav .last { 
    width: 87px; 
    margin-right: 0; 
} 

Answer 1

的<a>鏈接需要是display: block;爲了能夠採取高度和寬度

使塊級鏈接仍然並排顯示，你應該浮動li項目或使它們display: inline-block;

例如使用浮動的li的和一些顏色可視化

#header .nav_wrapper ul { 
    font-family: "Zurich Cn BT", Tahoma; 
    font-size: 12px;  
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 

#header .nav_wrapper li { 
    float: left; 
    width: 72px; 
    height: 30px; 
    margin-right: 15px; 
    background: #eee; 
    text-align: center; 
} 

#header .nav_wrapper li a { 
    display: block; 
    line-height: 30px; 
    } 

ul.nav li a, ul.nav li a:visited, ul.nav li a:focus { 
    color: #764422; 
    text-decoration: none;  
} 

ul.nav li a:hover, ul.nav li a:active { 
    color: #fff; 
    background: #444 url(../images/nav-bg.png); 
} 

Answer 2

添加這個CSS

ul.nav li a { 
    display:block; 
}