Currently there is the following list implementation:
<select id='optSelect' multiple>
<optgroup label='Option1'>
<option value='Option1' style='font-size: 15px;'>Option1</option>
<option value='Option12' style='font-size: 15px;'>Option12</option>
<option value='Option13' style='font-size: 15px;'>Option13</option>
</optgroup>
<optgroup label='Option2'>
<option value='Option21' style='font-size: 15px;'>Option21</option>
<option value='Option22' style='font-size: 15px;'>Option22</option>
<option value='Option23' style='font-size: 15px;'>Option23</option>
</optgroup>
<optgroup label='Option3'>
<option value='Option31' style='font-size: 15px;'>Option31</option>
<option value='Option32' style='font-size: 15px;'>Option32</option>
<option value='Option33' style='font-size: 15px;'>Option33</option>
</optgroup>
</select>
It is necessary to implement it so that when hovering over, for example, the Option2 element on the right at the Option2 level, a list of elements with:
<option value='Option21' style='font-size: 15px;'>Option21</option>
<option value='Option22' style='font-size: 15px;'>Option22</option>
<option value='Option23' style='font-size: 15px;'>Option23</option>
How to implement it? Help please!