Could someone please assist with highlighting the entire row of the parent for the drop down feature? In the given scenario, level1
and level23
should be highlighted like the child items are. The goal is to highlight the entire row with the entire width. Additionally, if it is the last child, a bullet should be added next to it. For parents, the entire row should be highlighted, while children without any further items should have a square bullet next to them. Any help with these two requirements would be greatly appreciated. I am new to web UI technologies and have spent a lot of time trying to make this work. Thank you in advance for any assistance.
<div class="row">
<div class="col-md-3">
<div class="well">
<div>
<ul class="nav">
<li>
<span class="glyphicon glyphicon-plus"></span><label label-default="" class="tree-toggle nav-header">Level1</label>
<ul class="nav tree" style="display: none;">
<li><a href="">Level21</a>
</li>
<li><a href="">Level22</a>
</li>
<li>
<span class="glyphicon glyphicon-plus"></span><label label-default="" class="tree-toggle nav-header">Level23</label>
<ul class="nav tree" style="display: none;">
<li><a href="">Level31</a>
</li>
<li><a href="">Level32</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>