i have some trouble with my menu.
See:
http://marketing-für-immobilien.de/
when i hover over the menu the background color change to blue and the font color turns to white. when i hover to the submenu same procedure but the main menu font color turns into blue. I cound´t find the right css to keep the white color for the main menu when i hover to the submenu.
Would be very fine, if someone can help me
Cheers
Sven
You have 2 different :hover definitions.
The first on the li tag of your main menu. This set the li background to blue.
The second is on the a tag of your main menu. This set the font color of the main menu to white.
And here is your mistake. If you move your cursor to the submenu, the cursor is still on the li tag of main menu, BUT not on the a tag anymore. So the second hover get off.
ADD to your CSS:
header.navbar nav > div > ul > li:hover {
background-color: #004b96;
}
this one:
header.navbar nav > div > ul > li:hover a {
color: #fff;
}
And remove:
header.navbar a:hover {
color: #fff;
}
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;
}
Once I click on the title of the menu a, the bottom tab is displayed #sub_backbone or #sub_backbone_center #sub_backbone_end depending on the location of the button:
Here's the code:
/*After hover link show me the menu*/
div#menu ul li a:hover + #sub_backbone,
div#menu ul li a:hover + #sub_backbone_center,
div#menu ul li a:hover + #sub_backbone_end{
opacity: 1;
}
But after I am bringing mouse on the tab #sub_backbone ... it disappears but should not disappear, there will be an additional menu.
Ie when selecting a title, the tab should not disappear when I drive my mouse over it.
How can solve this situation?
It disappears because you are moving away from the a link, which causes the styles to revert back to their defaults (I presume that the default style of #sub_backbone and others is opacity: 0).
The logic is simple: add an additional :hover style to #sub_backbone and others like this:
#sub_backbone:hover {
opacity: 1
}
Remember that this will only work if there is no distance between the a and #sub_backbone elements.
Edit: here's a jsfiddle with an example: click here. I've replaced the opacity: 1 with display: block
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.
I am actually changing the color of link & its background on mouse over. When I move the cursor to sub menu item the text of parent menu revert back to white. I did try to use a:active to resolve this issue but no luck.
please check the main navigation on this site http://kushian.com
for css
http://kushian.com/catalog/view/theme/red15/stylesheet/stylesheet.css
this is more of a guess (make a fiddle maybe?), but i think
#menu > ul > li > a:hover{
color:maroon;
}
needs to be
#menu > ul > li:hover > a{
color:maroon;
}