How to make whole <li> element as a link? - html

Question

I am unable to make whole li element clickable. I tried display properties, but nothing really helped. Here is a code:
#top_menu ul li {
position: relative;
list-style: none;
float: left;
display: block;
}
#top_menu ul li a {
display: block;
padding: 0 14px;
margin: 6px 0;
line-height: 28px;
text-decoration: none;
color: #fff;
}
#top_menu ul li:hover>a {
color: #8fde62;
}
#top_menu ul ul {
position: absolute;
opacity: 0;
background: rgba(70, 70, 70, 0.7);
}
#top_menu ul li:hover>ul {
opacity: 1;
}
#top_menu ul ul li {
height: 0;
overflow: hidden;
padding: 0;
}
#top_menu ul li:hover>ul li {
height: 36px;
overflow: visible;
padding: 0;
}
#top_menu ul ul li a {
padding: 4px 0 4px;
margin: 0;
border: none;
border-bottom: 1px solid #353539;
}
<ul>
<li>Additional
<ul>
<li>Commands</li>
<li>Guides</li>
</ul>
</li>
</ul>
And here is the result (on the left of the list there is blank space-not active):
So what am I doing wrong? How can I fix that?

Answer 1

The padding on the left is caused by the <ul>. If you set it to padding: 0;, that'll remove the null-space and allow you to style as desired from the <li> or the <a>
Example

Answer 2

I think you are confusing the issue a bit. The <a> can take up as much space inside the <li> as you want.
What I think you are missing is lists by default get styled with margin and also padding on the side, you can just remove that:
ul {
padding: 0;
}

Answer 3

As others have stated, a can fill the entire space available within li. Here's a working example though I had to adjust your colors and html for the snippet to work.
body{background: black;}
#top_menu ul li {
position: relative;
list-style: none;
float: left;
display: block;
}
#top_menu ul li a {
display: block;
padding: 0 14px;
margin: 6px 0;
line-height: 28px;
text-decoration: none;
color: #fff;
}
#top_menu ul li:hover>a {
color: #8fde62;
}
#top_menu ul ul {
position: absolute;
padding: 0;
opacity: 0;
background: rgba(70, 70, 70, 0.7);
}
#top_menu ul li:hover>ul {
opacity: 1;
}
#top_menu ul ul li {
height: 0;
overflow: hidden;
padding: 0;
width: 100%;
}
#top_menu ul li:hover>ul li {
height: 36px;
overflow: visible;
padding: 0;
}
#top_menu ul ul li a {
padding: 4px;
margin: 0;
border: none;
border-bottom: 1px solid #353539;
}
<div id="top_menu">
<ul>
<li>Additional
<ul>
<li>Commands</li>
<li>Guides</li>
</ul>
</li>
</ul>
</div>

Answer 4

Yo will need to use either javascript or jquery in order to attach an event to the whole li element.
If you decide for jquery you will need to add a class or id to identify the li you are targeting then, you will need to attach it the corresponding event.
$( "#top_menu ul li" ).click(function() {
alert( "Handler for .click() called." );
});
More informacion at: https://api.jquery.com/click/