JSFiddle - React, Tailwind, and code Playground

by vals

HTML

<h6>Normal overlay - not full width</h6>
<div class="tree">
    <ul>
        <li>
            <div class="item">
                Node 1
                <div class="overlay"></div>
            </div>
            <ul>
                <li>
                    <div class="item selected">
                        Node 2
                        <div class="overlay"></div>
                    </div>
                </li>
            </ul>
        </li>
    </ul>
</div>

<h6>Full width overlay (but side borders aren't visible anymore)</h6>
<div class="tree fullWidth">
    <ul>
        <li>
            <div class="item">
                Node 1
                <div class="overlay"></div>
            </div>
            <ul>
                <li>
                    <div class="item selected">
                        Node 2
                        <div class="overlay"></div>
                    </div>
                </li>
            </ul>
        </li>
    </ul>
</div>

CSS

h6 { font-size: 16px; font-weight: normal; margin-bottom: 10px; margin-top: 0; }

.tree { width: 300px; border: 1px solid #000; padding: 10px; margin-bottom: 15px; }
.tree ul { margin: 0; padding: 0; list-style-type: none; }
.tree ul li { padding-left: 16px; }

.tree li .item { position: relative; }
.tree li .item .overlay
{ position: absolute; left: 0; top: 0; width: 100%; height: 100%;
    background-color: #C5E7E6; display: none; border: 1px solid red; }
.tree li .item:hover .overlay { display: block; }

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