HTML tree full width hover effect

Question

I have an html tree which is mostly consisting of nested unordered lists.

I need to create a full width hover effect for each leaf, something similar with windows fi

Answer 1

A solution changing only the part of the CSS under "hack". I assume that at least you can change that

CSS

/*Full width hack*/
.tree.fullWidth { overflow: hidden; }
.tree.fullWidth li .item .overlay { right: -8px; width: 314px; left: auto !important; }

demo

If the tree has a variable width, this is better:

.tree.fullWidth li .item .overlay { 
    right: -8px; 
    width: 300px;
    padding-left: 14px; 
    left: auto !important; 
}

It works exactly like the other version, but now the width is the same that the tree width, so the Javascript doesn't need to set a magic width (that you don't know from where it comes: