Kaylan,
That is an excellent question. You can do that. Where you have this style in your Custom CSS:
#header #nav-bar .menu li a:hover,
#header #nav-bar .menu li:hover {
background: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
Change it to be like this:
#header #nav-bar .menu li a:hover,
#header #nav-bar .menu li:hover {
background-color: rgba(0,0,0,0.3);
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
and that should make the hover background approximately the same color/opacity as the drop-down menus. Since they overlay the navigation menu background, we have to use a slightly less opaque background than the drop-downs to get the same look.
Let me know if you have any trouble or questions.
Have a great week,
Bill