这是jsFiddle的链接。请注意,锚 (#nav>li>a) 并没有像它所说的那样扩展:
#nav li a {
width: 100%;
height: 100%;
}
有什么建议么?
您必须制作<a>
一个块元素并为其父元素提供一些宽度
#nav {
width: 100%;
overflow: hidden;
}
#nav li {
float: left;
height: 40px;
padding-left: 7px;
padding-right: 7px;
padding-top: 5px;
width: 100%;
}
#nav li a {
width: 100%;
height: 100%;
display: block
}
#nav li a:hover {
background: #0ff;
}
<ul id="nav" class="top">
<li><a href="">Home</a></li>
<li><a href=""><img src="" alt=""></a></li>
<li><a href=""><img src="" alt=""></a></li>
<li><a href=""><img src="" alt=""></a></li>
</ul>
http://jsfiddle.net/qkp9w/21/这是你想要的吗?