Question

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?

Answer 1

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