Conflict Libya
I have below li
object which is part of a dropdown menu. My problem is that when I find this submenu (and everyone else in the main navbar) it changes the desired font and background colors inside the " li
" object (font:, #304295
background:) light blue
, but when I am still on it but NOT directly on the object " span
" within it (letters), it still shows the color light blue
for the background, but the letters of the font change to white. What should I change in my CSS, so wherever I go to " li
" it will keep my desired conditions (font:, #304295
background; light blue
). I tried a lot of things, like using a condition !important
, but still no success and I am afraid that "a link"
contradicts others"a links"
from the outside. You can clearly see this
www.es-processing.com
when you hover over the navbar.
<li class=""><a href="http://www.es-processing.com/partnerships_awards.htm" target="_blank"><span>Partnerships</span></a></li>
and here is 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;
}
source to share
Try adding the hover pseudo class to the containing element. Currently, only when the finger (which is inline) hovers, the text is colored. You want the container to be colored when the container is frozen.
For example,
li.hover span {
color: #304295 !important;
}
or
li:hover span {
color: #304295 !important;
}
(Note: you must skip the important one)
And for the future, try adding jsfiddle or codepen. Helps you much easier
source to share