Mouse Hover Highlight Customisation via CSS - html

Question

The following is a TOC I have implemented on an instance of Confluence.
It's look has been customized so that when hovering over a menu item with the mouse, the corresponding menu item is highlighted as in the case of the 2. Navigation Bar menu item in the above image.
The hover effect is achieved via the following CSS code:
.toc-link:hover {
background-color: #e5e5e5;
text-decoration: none;
}
I'd like for the hover effect to span the entire width of the box though, similar to the image below:
What property would I have to insert into my CSS code to achieve the desired effect?
Thank you.

Answer 1

This can be achieved by setting display:block on your <a> element. The hover styles should be on your anchor tag, not on your <li>, for example:
a {
display: block;
text-decoration: none;
}
a:hover {
background-color: #e5e5e5;
}
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
If your list items do not have an anchor tag inside, you can achieve it like so:
li {
display: block;
}
li:hover {
background-color: #e5e5e5;
}
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>

Answer 2

You can try this:
#content {
border: 1px solid #DDDDDD;
background-color: #F6F6F6;
padding-right: 25px;
}
li{
padding: 5px;
list-style: none;
}
li:before {
content: "• ";
color: #ABADBB;
}
li:hover {
background-color: #DDDDDD;
}
<div id="content">
<ul>
<li>
Opening the Asset Browser
</li>
<ul>
<li>1. Menu</li>
<li>2. Navigation Bar</li>
<li>3. Folder Tree</li>
<li>4. Search Result Pane</li>
</ul>
<li>
Live Updates for Asset Resources Selectors
</li>
<li>
Texture Tool-tips
</li>
</ul>
</div>