Conflicting Li hover

Question

I have the below li object that is a part of a dropdown menu. My problem is that when i hover that submenu (and all the others in the main navigation bar) it changes to the desired colors for the font and the background inside that "li" object (font: #304295, background: light blue), but when i'm still hovering on it but NOT directly on the "span" object inside it (the letters) it still shows a light blue color for the background but the font letters changes to white. What should i change in my CSS so wherever i hover on the "li" it will keep my desired conditions (font: #304295, background; light blue). I tried many things like using the !important condition, but still no success and i am afraid maybe the "a link" is conflicting with other "a links" from outside. You can see that clearly on www.es-processing.com when you hover the navigation bar.

 <li class=""><a href="http://www.es-processing.com/partnerships_awards.htm" target="_blank"><span>Partnerships</span></a></li>

and here's my CSS

#header .navigation > ul > .oussi:hover {
     background-color: #304295!important;
     color: #ffffff!important;
}

#header .navigation > ul > .oussi a span:hover {
     cursor: unset!important;
     background-color: #304295;
     pointer-events: none;
}

#header .navigation .oussi span:hover {
     color: #FFFFFF!important;
     font-size: 13px;
     font-weight: bold;
     text-decoration: none!important;
     cursor: unset!important;
     background-color: unset!important;
     pointer-events: none;
}

#header .navigation {
     background: none repeat scroll 0px 0px #304295;
     box-shadow: 0px 4px 4px -2px #232323;
     float: left;
     margin: 36px 0px 0px;
     position: relative;
     height: 30px!important;
     padding-top: 0px!important;
     padding-left: 26px!important;
     padding-right: 26px!important;
     width: 100%!important;
}

#header .navigation > ul > li {
     display: block;
     float: left;
     padding: 7px 4px;
     height: 16px!important;
} 

#header .navigation > ul > li:hover {
     background-color: #95A7FD!important;
     color: #304295!important;
}

#header .navigation > ul > li a span {
     color: #ffffff;
     font-family: arial;
     font-size: 1.1em;
     font-weight: bold;
     white-space: nowrap;
     height: 30px;
}

#header .navigation > ul > li a span:hover {
     cursor: pointer ! important;
     text-decoration: none!important;
     color: #304295!important;
}

#header .navigation > ul > li.last {
     display: block;
     float: right;
     padding: 7px 4px;
     height: 16px!important;
} 

#header .navigation > ul > li.last:hover {
     display: block;
     float: right;
     padding: 7px 4px;
     height: 16px!important;
     background-color: #95A7FD!important;
     color: #304295!important;
} 

#header .navigation a {
     color: #686868;
     font-size: 13px;
     font-weight: bold;
     height: 16px!important;
} 

#header .navigation li.hover > a {
     color: #cc0000;
     display: block;
     float: left;
     font-weight: bold;
}

#header .navigation li.hover a span {
     display: block;
     float: left;
     position: relative;
     width: auto;
     z-index: 101;
}

Answer 1

Try adding the :hover pseudo class to the containing element. Currently, only when the span (which is inline) is being hovered, the text is colored. You want that when the container is hovered, it will be colored.

For example,

li.hover span {
    color: #304295 !important;
}

or

li:hover span {
    color: #304295 !important;
}

(Note: you should be able to skip the important)

And for the future, try adding a jsfiddle or a codepen. Makes helping you much easier