Trying to add a highlight on mouse-over for dropdown menu selections in Wordpress

Question

I'd like add a mouse-over highlight in my dropdown menu selections since currently on my menus i only have a simple dropdown. I have the newest wordpress version and I'm working on oneengine theme. I've tried to add this from some suggestions i have found on google but it didn't work at all with the mouse-over having no reaction at all:

#navigation li:hover a {
  background-color:#012A5E;
  color:#F1F1F1;
}

And here is the code related to the menu itself from my style.css:

#main-menu-top ul.sub-menu li a:hover, 
#main-menu-top ul.sub-menu li a:active {
border-left-color:#ccc; border-bottom-color: transparent;
 }
#main-menu-top .sub-menu {
 float: left; position: 
 absolute; display:
 none; padding: 0; 
 text-align: center; 
 border: 1px solid #BDC3C7; 
 border-top: none; 
 background: black; 
 z-index: 9999;
}
#main-menu-top li:hover ul.sub-menu {
display: block;
 }
 #main-menu-top .sub-menu li {
display: block; min-width: 100px;
}
 #main-menu-top .sub-menu li a { padding: 10px 15px;
 }
}

Also does this change require changing the style.css only or do i have to make a j.script code aswell? Any kind of help is greatly appreciated.

Answer 1

Does your theme have a custom css page? If yes then add this code there.
nav ul li:hover { background: red;}
If it is not available then go to Dashboard->Appearance->Editor and select 'Stylesheet (style.css)' file and add the code to the end of the file. But this has a problen. In the future when you update the theme there is a chance of losing all your edits. So it is safe to create a child theme in order to keep all the changes permanently. See this link to know more about child themes.