Search code examples
csshtmlhyperlinkhref

Clickable <a> tag background

I've made a nav menu with this code:

    <nav id="navitems">
        <ul>
            <li><a href="page1.html" id="link">PAGE 1</a></li>
            <li><a href="page2.html">PAGE 2</a></li>
        </ul>
    </nav>

I used CSS to make the links look like buttons and sit next to each other. However, I can only click the text to activate the link, not the background (button).

My question is: how can I make the grey area around the link also lead to the same link?

Solution

  • An alternative to emmanuel's answer is to add some padding to the a tag:

    ul {
    list-style-type:none;
}
li { 
    float:left;
}
a {
    background:grey;
    color:white;
    text-decoration:none;
    padding: 10px 20px 10px 20px;
    margin-right:1px;
}

    See it in action here: http://jsfiddle.net/rufneu0w/1/