I'm having a little trouble with background color of my dropdown menu. I changed the color of background color on hover to orange. But, if I go to any submenu in that dropdown, the color of parent item change to default blue. Don't know, how to explain it better, I will just show a picture:
So, as soon as I hover over subitem, the parent background color change to blue. I was trying to do a selector for that but ran out of ideas. Any help please?
I think you need something like this to ensure all CSS selectors are covered...
/* change background color on hover */
.dropdown-submenu > a:focus, .dropdown-submenu > a:hover, .dropdown-submenu:focus>a, r, .dropdown-submenu:hover>a,
.dropdown-menu > li a:hover,
.dropdown-menu > li a:focus { background-color: orange; background-image: none; filter: none; text-decoration: none; border: none; }
Demo: http://bootply.com/75155
Related
I've almost successfully changed the default white text and gray background menu color in the TwentySeventeen theme for WordPress by adding the lines below to a childtheme style.css stylesheet.
Menu ScreenShot
However, the menu still very briefly displays the default menu color as I mouse off any given selection in the sub-menus. I'm a hack when it comes to CSS and have spent hours trying to find a solution on line. Any suggestions? Thank you very much.
/*Change Drop Down Menu and Sub-Menu Hover and Text Color */
.menu a:hover,
.menu li:hover>a {
background-color: rgb(220, 225, 200) !important;
/* light green */
color: #000000 !important;
}
Seems like that because that there are 2 backgrounds, one on the li
and second on the a
The grey background is on the li so you just need to "reset" it
.main-navigation li li:hover,
.main-navigation li li.focus {
background: none;
}
I have included a jsfiddle to show you an example. I have the navigation ul items set with a white background and the font is a red color. When hovered over I want the two colors to swap, the background to become the red color and the font to become white. Before I put the anchor tags in it worked, but after the font does not change to the white color on hover. If I add this:
nav ul li a:hover{
color:white;
}
the font will change to white, but not when the box is hovered on, but only when the font itself is hovered on, but I want the font to change to white as the list item box is hovered on. Any help? Thanks!
jsfiddle: http://jsfiddle.net/xNZxF/
Add this:
nav ul li:hover a{
color:white;
}
jsFiddle example
To match the easing you may want to also add -webkit-transition: all .5s ease-in-out; to nav ul a.
jsFiddle example
Just add the following to your CSS.
nav ul li:hover > a {
color: white;
}
Also remove color: white; from nav ul li:hover. You where trying to change the text color of the text within the li while it was actually in the a. With nav ul li:hover > a you can change the color of a when the nav ul li is being hovered over. This doesn't give the text a fancy transition to it's hover color, but I think you can figure that out by yourself. Good luck!
Give this a go:
nav ul li:hover a {
color: white;
}
I have a site here
At the top of the screen, you'll see a menu. Hover onto "Everything" and you'll see a sub-menu.
When you hover over an item, you'll see a dark grey background on each menu item. The text stays red, and I want the text to be white on hover.
Here's what I have so far...
#nv-tabs ul li ul li:hover {background: #252525!important; }
It looks like the text color (on hover) should also be in this div id, so I've tried this...
#nv-tabs ul li ul li:hover {background: #252525!important;color: #FFFFFF;}
...but it's not working.
Not sure where I'm going wrong here.
Try
#nv-tabs ul#dyndropmenu.menu li ul.sub-menu li a:hover {
color:white !important;
}
^ should make the text white on hover while the other texts stay red.
Try something like this #nv-tabs ul li ul li:hover a {color: white !important;}
Considering you said your code is not working... you may have something setting the color of the text of your <a> tags directly... that's why you possibly need to access directly your <a> tags to change their text color...
I can see this in your code :
#nv-tabs a {
color: #000000;
}
I think this is why you must access your <a> tags directly to change the color. If the color was set with #nv-tabs ul li ul li you could probably do #nv-tabs ul li ul li:hover to change it.
If someone can name this behaviour, I'd be pleased. I don't know how it is called, but I'm pretty sure that's how it works.
So I am using twitter bootstrap on my site and using a css template I purchased. Unfortunately when using typeahead the drop down appears the hover/ focused choice on the drop down is too dark and obscures my text. The text is black and the background is a very dark grey on my hover / focus so the text is unredeable
I tried modifying dropdown-menu .active > a:hover and the color attribute for almost everything I could see with drop down in it, but that didn't change the text color. I must be missing something easy
Also when I try clicking on it to choose inspect element in chrome it disapears unfortunately
I would appreciate any help
This looks like a promising start for you:
http://jsfiddle.net/panchroma/SDLpt/
The hover background is actually a gradient. I've changed the default hover background to #aaa and the default hover text colour to red and everything looks good.
CSS
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
color: red;
text-decoration: none;
outline: 0;
background-color: #aaa;
background-image: -moz-linear-gradient(top, #aaa, #aaa);
.....
}
Good luck!
Hi I have a little CSS problem with a Superfish menu, when an active menu is hovered the color: #000000 don't apply, both background and color is white. The inactive menu works as I want.
Example:
Menu 1 (active)
- Bla
- Bla
Menu 1 (active & hover)
- Blank
- Bla
pastebin: http://pastebin.com/ziYaZJ3e
.ot-menu li li a:focus, .ot-menu li li a:hover, .ot-menu li li a:active {
background: #FFFFFF;
color: #000000;
border-bottom: none;
outline: 0;
}
.ot-menu .current_page_item li a, .ot-menu li .current_page_item a {
background: black;
border-bottom: none;
color: white !important;
}
The color set here is the reason you are getting white on white. But if disabled the non-hovered active text becomes black on black BG. You need to re-structure your style rules / ordering.
Where possible try to avoid using !important where you can as it can make tracking down styling issues very difficult (speaking from experience, I've produced some really nasty style-sheets lazy-coding with it).