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
Related
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;
}
I'm trying a pure css approach to keeping the 'parent-most' navbar item highlighted when a child is clicked upon and a user navigates to that page. I have a primary navbar div with an unordered list, and each list has a list like so, so in this case a user navigates to the second most li here:
.primary-navbar ul li ul li{
background-color: red !important;
}
how do I make it so when the second li is active, the first li has background color of blue?
I tried:
.primary-navbar ul li:active {
background-color: blue !important
}
but that did not work and I'm not sure why. I'm trying to avoid jquery...
:active is the state of the element when active (i.e. a link is active when it is clicked). When you load the new page, no elements are active. You'll need to add a class to the li on the new page (something like 'active' or 'current-page' for example) to get the effect you're looking for. It's not possible with CSS only.
When you implement that, you should also take a second look at your CSS:
.primary-navbar ul li.active {
background-color: blue !important
}
That will not only make the first (parent) li.active blue, it will also target any li.active nested beneath it. i.e. it will also make .primary-navbar ul li.active ul li.active blue.
Try something like:
.primary-navbar > ul > li.active {
background-color: blue;
}
The >s will only target the li.active that is directly under the ul that is directly under .primary-navbar
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 using Superfish to show a horizontal menu on a website. Whenever I am on a page that is either the current menu item or sub-menu item, the sub-menu always show. When this happens, it overlaps other sub-menus when you hover the mouse over them. How do you hide the current sub-menu being shown?
edit:
OK I figured out how to do this with CSS. I added the following code to superfish-navbar.css
ul.sf-navbar ul {
display: none;
}
ul.sf-navbar li:hover ul {
display: block;
}
It hides the current sub-menu and shows all sub-menus when you hover over the parent item.
For CSS
In superfish-navbar.css you would remove the following rule at line 63.
ul.sf-navbar .current ul, ul.sf-navbar ul li:hover ul, ul.sf-navbar ul li.sfHover ul {
left: 0;
top: 2.5em;
}
When You End Up Using Javascript
In the documentation for the superfish plugin, on the Options tab, it shows the default options. It looks like pathLevels is set to 1, and the description of pathLevels
the number of levels of submenus that remain open or are restored
using pathClass
looks like the option you need. Try setting pathLevels to 0.
See this jsfiddle for comparison: http://jsfiddle.net/keithwyland/G87Lm/
http://users.tpg.com.au/j_birch/plugins/superfish/#options
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;
}