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.
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;
}
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
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
I hav a nav menu which has a white text and blue background and on hover its blue text with black background where as on selected its white text with black background. But if I hover on selected menu item it shows me blue text (properties of :hover) which I don't want to happen. Any way I can stop it?
Fiddle : link
Just add the .selected:hover case as well
main_menu li .selected,
main_menu li .selected:hover{
Demo at http://jsfiddle.net/WTeYW/3/
Additionally, since your .selected and :hover rules are identical except for the color you should merge them and create new rules just for the differences (better maintainability)
.main_menu li a:hover,
.main_menu li a.selected{
box-shadow:0 20px 30px -10px rgba(255,255,255,0.4);
border-color:#888;
background:#000;
}
.main_menu li a:hover{color:#6cf;}
.main_menu li a.selected,
.main_menu li a.selected:hover{color:#ffffff;}
Demo including this at http://jsfiddle.net/WTeYW/5/
(notice : if you read the original answer it was a bit wrong. the a.selected is not more specific, it is equally specific but prevailed because it was the last in the CSS file. The above correction is the way to do it.)
I used CSS :not(.selected) to prevent :hover being executed.
.main_menu li a:not(.selected):hover{
Here: http://jsfiddle.net/CfeCB/
This is what you mean right?
You can use css :not() selector for this :
.main_menu li a:hover:not(.selected){
box-shadow:0 20px 30px -10px rgba(255,255,255,0.4);
border-color:#888;
background:#000;
color:#6cf;
}
Try This
Refrence 1
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Change bullets color in a list without span
Normally, the bullet point in ul/li is a black solid circle. I want to change the style of it, like I want to set the color of the bullet point to be green, I also want to change the bullet point to be a square. Anyone knows how to do that?
Apply the color to the li and set the span (or other child element) color to whatever color the text should be.
ul
{
list-style-type: square;
}
ul > li
{
color: green;
}
ul > li > span
{
color: black;
}
JSFiddle
A couple ways this can be done:
This will make it a square
ul
{
list-style-type: square;
}
This will make it green
li
{
color: #0F0;
}
This will prevent the text from being green
li p
{
color: #000;
}
However that will require that all text within lists be in paragraphs so that the color is not overridden.
A better way is to make an image of a green square and use:
ul
{
list-style: url(green-square.png);
}
I believe this is controlled by the css color property applied to the element.
http://www.w3schools.com/cssref/pr_list-style-type.asp
You need to use list-style-type: to change bullet type/style and the above link has all of the options listed. As others have stated the color is changed using the color property on the ul itself
To create 'black filled' bullets, use 'disc' instead of 'circle',i.e.:
list-style-type:disc