html - 如何在具有边框图像的整个 <li> 上建立链接？

Question

我想要一些有效的代码，没有 <a><li></li></a>
问题来了:
http://jsfiddle.net/BquwS/

我也必须在这里添加代码，因为我不能问 jsfiddle-link-only 问题，所以这是 html:

<nav id="menu">
<ul>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Gallery</a></li>
</ul>
</nav>

这是我遇到问题的 css。

#menu {
    width: 180px;
    padding: 0 10px 10px 10px;
    float:left;
    text-align:center;
    font-size:20px;
    font-weight:bold;
    line-height:15px;
}
#menu ul{
    list-style-type:none;
}
#menu li{
    height:15px;
    background-color:#404468;
    margin:20px 0 20px 0;
    /*border-image*/
    border: 1px solid transparent;
    border-image:url("http://users.atw.hu/darksoul90/egyeb/border.png") 45 45 45 45 stretch stretch;
    border-width:17px 17px 17px 17px;
    -moz-border-image:url("http://users.atw.hu/darksoul90/egyeb/border.png") 45 45 45 45 stretch stretch;
    -webkit-border-image:url("http://users.atw.hu/darksoul90/egyeb/border.png") 45 45 45 45 stretch stretch;
    border-image-outset: 10px;
}
#menu li:nth-child(odd){

    -ms-transform:rotate(1deg); 
    -webkit-transform:rotate(1deg);
    transform:rotate(1deg);
}
#menu li:nth-child(even){
    -ms-transform:rotate(-1deg); 
    -webkit-transform:rotate(-1deg);
    transform:rotate(-1deg);
}
#menu a {
    display:block;
    height:100%;
    width:100%;
    color:#b7c4d8;
    text-decoration:none;
}
#menu a:hover {
    color:#Ff0;
}

Answer 1

由于粗边框，链接的可点击区域很窄。您可以扩展链接的可点击区域，但这需要绝对定位。

http://jsfiddle.net/89Rv8/7/

http://jsfiddle.net/89Rv8/7/show

#menu li {
  position: relative;
}
#menu a {
  color: #B7C4D8;
  display: block;
  left: -17px;
  line-height: 30px;
  min-height: 33px;
  position: absolute;
  text-decoration: none;
  top: -17px;
  width: 141px;
}