使<a>链接可以通过整个<li>进行点击

Question

请看看这个:

这是我的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>

而我的css:

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

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

仅当我将光标放在文本链接上方并单击时,才会激活链接.我想能够点击较暗的"li"背景中的任何地方并激活相应的链接.这怎么可能？

Answer 1

你可以试试这个(例子)

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