I currently have a masked background and a drop-down hidden behind it. Here is how it appears:
https://i.sstatic.net/QTLN5.png
However, I want it to look like this:
https://i.sstatic.net/ZAreM.png
This is the HTML code being used:
<div id="suggest" style="position: fixed; border: 1px solid rgb(168, 168, 168); width: 304px;" data-sap-ui-area="suggest">
<div id="__list0" data-sap-ui="__list0" data-sap-ui-fastnavgroup="true" tabindex="-1" style="width:100%" class="sapMList sapMListBGSolid">
<div id="__list0-before" tabindex="-1"></div><ul role="listbox" id="__list0-listUl" tabindex="0" class="sapMListModeNone sapMListShowSeparatorsAll sapMListUl">
<li id="__item0-__list0-0" data-sap-ui="__item0-__list0-0" tabindex="-1" role="option" aria-describedby="__text4" class="common-txt-align-left sapMLIB sapMLIB-CTX sapMLIBShowSeparator sapMLIBTypeActive sapMSLI">
<div class="sapMLIBContent" id="__item0-__list0-0-content">
<div class="sapMSLIDiv sapMSLITitleDiv">
<div class="sapMSLITitleOnly">TOI_1770089305</div>
</div><div class="sapMSLIDescriptionDiv">
</div>
</div>
</li>
</ul>
<div id="__list0-after" tabindex="0"></div>
</div>
</div>Edit - The mask effect is achieved using a div with the following CSS class:
.common-opaqueDom {
position: absolute;
top: 0px;
display: block;
width: 100%;
height: 100%;
z-index: 1199;
background: rgba(0, 0, 0, 0.50);
}