<a> link in a <li> doesn't cover the entire surface

I'm designing a navigation bar. The code looks like this:

<nav class="menu">
  <ul class="topnav">
    <li><a href="index.html">Overview</a></li>
    ...
  </ul>
</nav>

In css I have the following code for the li elements:

ul.topnav li{
    cursor:pointer;
    list-style-type:none;
    display:inline;
    float:left;
    background-clip:padding-box;
    text-align:center;
    width:139px;
    background-repeat:repeat-x;

    background-image:url(images/nav_normal.png);
    background-color:#CC33CC;
    font-size:14px;
    padding:9px 0 8px 0;
    margin:0;
    color:#6F5270;
    text-shadow:#FCF 0 1px;
}
ul.topnav li a{
    font-size:15px;
    font-weight:bold;
    padding:auto;
    color:#FFFFFF;
    text-shadow:#903 0 1px;
    text-decoration:none;
}

It generates this following button:

The problem is the link-clickable area (shown in blue above) doesn't cover the entire surface of the button. So when I click on the edges of the button, it doesn't work. I tried to play with padding value but couldn't solve the problem. Is there an easy and efficient way to make the link 开发者_运维知识库cover the whole area of the button so that it works wherever on the button the user might click?

Try setting display: block; in the CSS for ul.topnav li a.

Make the <a> tag display:block and add the padding, width etc to the anchor.

ul.topnav li{
    cursor:pointer;
    list-style-type:none;
    display:inline;
    float:left;
    margin:0;
}

ul.topnav li a{
    display: block;
    color:#6F5270;
    text-shadow:#FCF 0 1px;
    background-repeat:repeat-x;
    background-image:url(images/nav_normal.png);
    background-clip:padding-box;
    background-color:#CC33CC;
    text-align:center;
    width:139px;
    font-size:14px;
    padding:9px 0 8px 0;
    font-size:15px;
    font-weight:bold;
    padding:auto;
    color:#FFFFFF;
    text-shadow:#903 0 1px;
    text-decoration:none;
}

Try this:

ul.topnav li a{
    font-size:15px;
    font-weight:bold;
    color:#FFFFFF;
    display:block;
    height:17px;
    line-height:17px;
    text-align:center;
    text-shadow:#903 0 1px;
    text-decoration:none;
}

i use only this

ul.topnav li a{
    display:inline-block;
}