Clickable tag background

Question

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?

possible duplicate of [How do I make the whole area of a list item in my navigation bar, clickable as a link?](http://stackoverflow.com/questions/3074454/how-do-i-make-the-whole-area-of-a-list-item-in-my-navigation-bar-clickable-as-a) — isherwood, Feb 26 '15 at 18:49

score 3 · Answer 1 · answered Feb 26 '15 at 18:44

3

<a> elements by default displayed as inline. You should change it to block to occupy the entire space of its parent.

ul {
  list-style-type: none;
}
li {
  background: blue;
  width: 100px;
}
li a {
  background: orange;
  display: block;
}

<nav id="navitems">
  <ul>
    <li><a href="#" id="link">PAGE 1</a>
    </li>
    <li><a href="#">PAGE 2</a>
    </li>
  </ul>
</nav>

answered Feb 26 '15 at 18:44

emmanuel

9,607
10
25
38

You could use `href="#"` to avoid broken page loads – leigero Feb 26 '15 at 18:45

score 2 · Accepted Answer · answered Feb 26 '15 at 18:48

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/

Clickable tag background

2 Answers2