If you'd like to utilize the select/option tag, keep in mind that customization of the default drop-down list is limited.
To create a custom drop-down list, consider using the Bootstrap element dropdown or coding your own design from scratch.
For an example of a custom drop-down list, check out this link: https://codepen.io/Sinorielle/pen/jOGKYaP
Here's an HTML snippet:
<div class="col-lg-4">
<div class="form-group">
<label class="form-label">Goal</label>
<div name="semiTaskType" class="form-select customDropDownList" id="semiTaskType">
<div class="selectedOption">Select Option ▼</div>
<ul class="listContainer">
<li value='regression'>
<p>Soft Sensor</p>
<p class="description">
Description
<a href="#">The link of death</a>
</p>
</li>
<li value='classification'>
<p>Contributory Factors</p>
<p class="description">
Description
<a href="#">The link of death</a>
</p>
</li>
<li value='forecasting'>
<p>Prediction</p>
<p class="description">
Description
<a href="#">The link of death</a>
</p>
</li>
<li value='forecasting2'>
<p>Title</p>
<p class="description">
Description
<a href="#">The link of death</a>
</p>
</li>
</ul>
</div>
</div>
</div>
CSS styling:
.customDropDownList{
display: inline-block;
position: relative;
}
.customDropDownList:hover .listContainer{
display: block;
}
.selectedOption{
padding: 5px;
border: 1px solid black;
border-radius: 5px;
background: white;
}
.listContainer {
display: none;
position: absolute;
border: 1px solid black;
padding: 0;
margin: 0;
border-radius: 5px;
list-style: none;
z-index: -10;
}
li {
padding: 5px;
}
li:hover {
cursor: pointer;
background: grey;
}
p {
margin: unset;
}
.description {
display: none;
}
li:hover .description {
display: block;
}