Styling an html tag inside javascript file

How can i add a background color to each element on hover to this dropdown list?

            ${surahs.map(s => `<option value="${s.id}"> ${s.id} : ${s.name_arabic} - ${s.name_simple}</option>`).join('n')}

HTML:

          <a href="#" id="surah-DropDown" onchange="onSurahChange(this.value)"></a>

I tried to add it in the css file through .surahdropdown but failed, because it gave a background color to the whole list on hover instead of each element