I'm currently working on an application that requires a submenu within the option tag. The idea is that when a user clicks on one of the submenu options, it should appear in the search bar for searching purposes. Unfortunately, I'm facing some challenges with implementing this feature. Below is the code snippet that I've been working with:
<div class="form-row">
<select class="form-control mx-sm-3"">
<option selected="selected">Variant</option>
<option>Protein Variant</option>
<option>Copy Number Alterations</option>
<ul class="nav navbar-nav">
<li class="dropdown">
<option href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true"> <span class="nav-label">Services</span> <span class="caret"></span></option>
<ul class="dropdown-menu">
<option>Service A</option>
<option>Service B</option>
<option>Service C</option>
</ul>
</li>
</ul>
</select>
</div>
The expected behavior is that when the user hovers over 'service', a new box should display with options 'Service A', 'Service B', 'Service C'.