My navigation has dropdowns, and within them there are a tags wrapping the items. I want the hover background color to be applied when I hover over that entire li. Right now it's only applying to the li, and when I move off the text it's the other background color.
Live here: http://stage.christinas-kitchen.com/
I'm working under "recipes", if you look under sprinkles that is how it should work (I have nothing wrapped in an a tag yet).
Any insight is appreciated.
One of the styles in your stylesheet is
.nav ul li ul li a {
background: #6ac4c2;
display: block;
color: #fff;
text-decoration: none;
}
That is your problem; since the a has its own background color, and the a is a child of the the li, changing the li's background color does not influence the a's background color.
You really just want the li styles to be determining the background color of your menu items, so just remove the background attribute from that style declaration. That way, the a's background will be dictated by the parent li, and your menus should work how you want them to
Related
I'm programming a simple wordpress page and want to change the background color of the menu bar (on the top right) when hovering over it. It's on this website: https://www.happylogo.be/.
I normally just do this with 'add additional css' which just is a css file.
The weird thing is that I beleive my selector code is right because when I add 'visibility:hidden;' It rapidly disappears and reappears again when hovering over the li items.
The css code I use now:
#menu-primary-coach li:hover{
/*#menu-primary-coach is the id of the lu*/
background-color: #c7143a !important;
}
But it doesn't work.
How can I change the background color when hovering over the menu items?
I noticed the <a>tag inside of your <li> is actually overriding the hover state with black.
#primary-nav ul li:hover > a, #sticky_menu li:hover > a {
background-color: #000000;
}
You can remove this style or also set the hover state of the <a> to your desired color.
It's caused by this line of CSS. There is a hover on the <a> within the <li>. Since the page is using xhtml the hover style should be on the <a> rather than the <li>. If you use HTML5 it can be on the <li>.
#primary-nav ul li:hover > a, #sticky_menu li:hover > a {
background-color: #000000;
}
Is there a way to do this without javascript and just using CSS?
I have a navigation. The text within the anchor elements are black. Upon hover of the line item the line item becomes orange. At that point I would like to alter the child anchor element text to be white.
What I have right now is an anchor tag rule to be white when hovered. Because the anchor is smaller than the line item it means that, hovering over the line item doesn't change the text to white straight away, only when the mouse hovers over the center, where the anchor tag is.
I could post html but I don't think its necessary. Is it? Hope I'm making sense and that my question is clear.
Put another way, I'd like to alter an element based upon the hover state of it's parent element.
It is not possible to target the parent element using CSS selector. You can instead add a :hover rule to line item to change its background color. At the same time, add an additional rule that changes the color of the child link upon hover:
li:hover {
background: orange;
}
li:hover a {
color: white;
}
Demo
You can try this. Giving a tag display:block; will take the full width of your li element.
#menu li a:hover {
background: #FC6;/*added*/
}
#menu a {
color: #000;
dispaly:block;/*added*/
}
DEMO
First of all i would like to add that its been a while, about 3 years, since i've developed a dropdown menu in CSS. I have this drop down menu, but i have the following issue. apparently i cannot override properties of li/a elements of my submenu.
I would like to make the font color of submenu's li's a elements same as color of menu's ul's li's a elements, which is light grey ( rgb(206,206,204) )
Could somebody please take a look and point me at what i am doing wrong? Here's a link to a source code archive with html, css and background images:
http://www.filedropper.com/001_17
Your problem is in this rule:
div ul.menu li:hover a{
background-color: rgb(73,144,241);
background-color: rgba(73,144,241,0.05);
color: rgb(255,255,255);
}
With that rule all <a>'s in that <li> turn white. What you need to do is have only the direct children turn white:
div ul.menu li:hover > a{
background-color: rgb(73,144,241);
background-color: rgba(73,144,241,0.05);
color: rgb(255,255,255);
}
JSFiddle Demo
this css code should only color the background of li tags directrly under the topUl, but it colors the background of all li in the whole unordered list:
ul.topUl > li {
background-color: #ff0 !important;
}
What am I doing wrong?
Presumably, you haven't change the background colour of the descendant li elements from the default of transparent.
I have nested ul/li's and the problem is that if you add a background color to the top li, because there are nested items within it the whole list appears to have this background color rather than just the top li (I assume this is because it's extending the height of the top li).
Is it possible to only apply the background color to the top li?
I hope this makes sense!
There is the relationship selector > which means "immediate children":
ul > li {
background-color: <your color>;
}
but I have had problems with cross-platform compatibility while using it. What you can also do is set up multiple levels of rules:
ul li {
background-color: <your color>;
}
ul li li {
background-color: none;
}
You're speaking of the top li, but I think you mean the root li, which has child elements containing li elements as well. In that case, you can set the background color as follows:
.myroot>ul>li { background-color: Yellow }
Note: the sample above requires a wrapper element (usually a DIV) with the class name "myroot".
See this article for more about CSS child selectors.
What I understand is that you have a UL with LI in it (let's call it 'parent'), and that LI also has a UL with LI (let's call them child) in it? You apply the background to the parent and it's also visible under the child?
As the child are located INSIDE the parent they must change his height, so the background is bigger than tought, there is 2 way to block that, you could (as mentionned earlier) put another background the the child, or you could put something like a SPAN inside the parent and put the background on the SPAN instead of the LI.parent.
well you can always apply a different background colour to the child li's.
use jquery and give a special class to the first li
`$("ul li:first")`.addClass('special_bg')
= get only the first <-li-> element of the <-ul->
This depends on your CSS. You could define a top-level li class and use that to set the background colour.
Children always inherit attributes from the parents; that's why it's called Cascading Style Sheets.
I suggest to give all li elements a default background color and just override it for the top level elements (for example with a special class).