I have created a drop-down menu using CSS and HTML.
What I'm wanting is for the navigation menu item to turn back to blue when I hover over a sub-menu link. For example, when I hover over the Resources1 heading under the Resources heading, I want the Resources font to change back to the colour blue.
JSFiddle: http://jsfiddle.net/SSL78/
Can someone advise me how to do this using CSS?
Just change your :hover to the anchor tag and not the li tag.
#menu li a:hover{
color:red;
}
#menu li a:hover{
color:red;
}
Here is a JSFiddle of it
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 am using WordPress twentyeleven theme and developing my custom theme. The live demo of the site can be seen here. In that site you can see there are two types of menus. On the left and another one in the right side. In the right side menu you can see there is a drop-down menu.Here when you will hover on the parent menu drop down box will come but there is one problem with this. When you will hover on the parent menu the drop-down menu can be seen but with the arrow on the right side. So here I want there should be no arrow images on the sub menus when I will make hover on the parent menu. Can someone tell me how to do this?
I am really stocked with this point.
Define your child a span background-image:none;
Add this css
#access #header-right-menu ul li:hover ul a span {
background-image: none;
}
I think you should add !important after background-image: none;
#access #header-right-menu ul ul li a span {
background-image: none !important;
}
I have made a css dropline menu. It's works fine, but there's a small issue if i go to the child menu, the parent menu text color should be hover text color(#ccc;), but it's move default color(#000;).
Here Jsfiddle Link: http://jsfiddle.net/thilakar/aTXbm/4/
Please help me out with this issue.
Thanks
That's because you have the hover-effect on the link. You'll have to use :hover on the li to have the hover effect even when you're hovering a submenu.
Change
.menu ul li a:hover
To
.menu ul li:hover a
And I think you'll get the effect you're after.