Drop down menu going behind Hero image on mobile display

my dropdown menu goes behind my Hero image, rather than in front. I managed to fix it on the desktop display using this:

#site-navigation ul.sub-menu {
z-index: 999;
}

However, it did not work for mobile display. Please could you let me know if there is a way to fix this. I saw some people online recommend changing the Z-index, but I can’t figure out how to do that.

Thank you!