how to make the whole block clickable?

Question

I have create a navigation menu but the problem i face is that when i hover my mouse to the edge each menu block the ancor tag does not work, it works only when i place the mouse near the text. my question is that i want to make the whole block clickable any solutions?

Here a fiddle.

The markup.

<div id="nav">
    <ul class="menu">
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="/work/">Products</a></li>
        <li><a href="/contact/">Careers</a></li>
        <li><a href="/contact/">Contact</a></li>
    </ul>
</div>

The CSS.

#nav {
    width: 960px;
    background: #222222;
}

.menu {
    width: 960px; 
    margin: auto;
    padding: 0;
list-style: none;
text-align: center;
}

.menu li {
    display: block;
    border-right: 5px solid #222222;
    border-bottom: 3px solid #222222;
    padding: 10px;
    float: left; 
    width: 166px;
    height: 20px;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    background: #0C5E91;
}

.menu li:hover {
    background: #95d629;
}

.menu li a {
    display: block;
    float: left;
    width: 140px;
    height: 20px;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
}

.menu li a { 
    text-decoration: none;
    color: white;
}

Possible duplicate of: http://stackoverflow.com/questions/3074454/how-do-i-make-the-whole-area-of-a-list-item-in-my-navigation-bar-clickable-as-a?rq=1 — James Bruckner, Sep 15 '13 at 18:42

score 3 · Answer 1 · answered Sep 15 '13 at 18:41

3

Add width, height, and padding to the </a> element, not the <li>.

http://jsfiddle.net/tv8Dw/2/

answered Sep 15 '13 at 18:41

Explosion Pills

188,624
52
326
405

instead of fix height % width, use 100%. like [this](http://jsfiddle.net/avrahamcool/tv8Dw/3/) – avrahamcool Sep 15 '13 at 18:45

score 0 · Answer 2 · answered Sep 18 '14 at 12:55

0

$('#nav').click(function(){  alert('clicked'); });

answered Sep 18 '14 at 12:55

Pratik

1,550
1
9
9

better to avoid js, this is very simply solved by just using css – Kat Lim Ruiz Jan 06 '20 at 15:53

score 0 · Answer 3 · answered Sep 18 '14 at 12:58

0

Put the <a href> before <li> :) and close </a> after </li>

answered Sep 18 '14 at 12:58

EloiseM

39
1
10

The problem of this, it is not semantic, so it is not a good practice – Kat Lim Ruiz Jan 06 '20 at 15:53

how to make the whole block clickable?

3 Answers3

Linked