CODEWITHSUNDEEP
htmlcsshtml-listsnav
hytromo
hytromo

Reputation: 1531

Make <a> link clickable through the whole <li>

Please take a look at this:

website menu

This is my html:

    <nav id="mainNav">
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="projects.html">Our Projects</a></li>
            <li><a href="team.html">Our Team</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
    </nav>

And my css:

#mainNav ul li {
    padding-left: 10px;
}

#mainNav ul li:hover {
    background-color: rgba(0,0,0,.2);
    color: #fff;
    cursor: pointer;
}

The links are activated only when I place the cursor above the text's link and click. I would like to able to click anywhere inside the darker "li"'s background and activate the corresponding link. How is this possible?

Upvotes: 0

Views: 2371

Answers (4)

Alex Noble
Alex Noble

Reputation: 95

Move the tags to the outside of the li tags.

  • Alex

Upvotes: 1

Carl0s1z
Carl0s1z

Reputation: 4723

It is only possible to click on the link(text) because the <a> has the height and width of the font, not from the <li>. If you want to be able to click on the full <li> you can use something like this.
Set the <a> around the <li>.

Example:

<a href="index.html"><li>Home</li></a>

Updated with a demo:

DEMO

Upvotes: 2

par4nnoyd
par4nnoyd

Reputation: 11

You can try it like this:

<li onclick="location.href='index.html'">Home</li>

Upvotes: 1

The Alpha
The Alpha

Reputation: 146269

You may try this (Example)

#mainNav ul li a {
    display:inline-block;
    width:100%;
}

Upvotes: 8

Related Questions