Solved Make the header CSS code the same in mobile

Hello everyone !!!

My question is maybe easy for some of you but i'm stuck to find how to make this code working for tablet and mobile version also ?

I'm pretty sure it's not too complicated but i'm still newbie in this and don't know how to do it.
If somebody can help me it can be great.
Thank you in advance !

This is the code is use to resize the sub-menu and give him some style.
It works well with the Computer Version of the website but on tablet and mobile it's not working.
I know I miss the code for it but I'm not sure wich one I need.

Code CSS :
______________________________________________________________________________________

#top-menu .sub-menu li a {
font-size: 16px;
border-bottom: 1px solid #770303;
width: 100%;
}

#top-menu .sub-menu li a:hover {
color: white !important;
opacity: 1;
background-color: #770303;
}

#top-menu .sub-menu li {
padding-left: 0px;
padding-right: 0px;
width: 100%;
}

#top-menu .sub-menu {
padding-top: 0px;
padding-bottom: 0px;
}
______________________________________________________________________________________

Thanks for the help

 

Thank you for your fast response, I will try it and tell you if it works well...
Have a great evening !!!

 

It works but just one thing, all the elements of the sub menu in mobile and tablet get selected with the same time (same background-color) when I pass the mouse on it, like in the pic...

How can we fix this please ?

 

And the page "Contact" get selected like one page only :

 

It works well this one, thank you again for your help!!!