[Question] How do I make an entire li tag a link?

I have the following HTML code:

<div id="menu"> <ul> <li class="selected"><a href="#">Home</a></li> <li><a href="#">Content</a></li> <li><a href="#">Members</a></li> <li><a href="#">About</a></li> </ul> </div> 

and the following CSS:

#menu { margin-top: 0; height: auto; } #menu ul { margin-top: 0; } #menu ul li { display: inline-block; margin-right: -4px; padding-top: 5px; padding-bottom: 5px; padding-left: 15px; padding-right: 15px; } #menu ul li.selected { background-color: #3bb9ff; } #menu ul li a { display: inline-block; color: #ffffff; font-weight: bold; } #menu ul li:hover { background-color: rgba(110,110,110,0.5); } #menu ul li.selected:hover { background-color: #3bb9ff; } #menu ul li a:hover { text-decoration: none; } 

When you move the cursor on top of an <li> tag, the hover takes effect and highlights the element. But you actually have to hover over the link text istelf in order to click on it. Is there any way to make the entire li clickable short of putting the a tag around it?

Epic visual tool

Epson 5030UB 2D/3D 1080p 3LCD Projector Submitted September 26, 2015 at 06:12AM by FlirtyBirdy01 http://ift.tt/1JuRJaq