How do I go about keeping the menu item at the top (eg. file) remain highlighted while I am browsing though menu options in the sub menu?
Here's a paste bin: http://pastebin.com/aGJh8nQa
Why, with this selector, of course!
#menu li:hover > a {
background-color: rgb(216,216,216);
}
View it on JSFiddle
Related
I'm using generate press and add some megamenu CSS unfortunately upon clicking the submenu it's not clickable here is the link
I tried to use this mega menu to create columns for each sub-menus
https://hrcstaging.wpengine.com/
here is the CSS that I added
https://docs.generatepress.com/article/building-simple-mega-menu/
.main-navigation ul ul {
pointer-events: inherit;
}
ok this works fine now
I have a menu on the website and it has sub menu also which open On hover.
Menu is working great but Sub menu is not starting from first li so that it can act as Mega menu.
I though it can be accomplished by below line
#ayurmenu ul li:hover > ul {
left: 0px;
}
But it is not working. Below is the link to JSFiddle. Please check.
JS Fiddle here for Menu
Ps: Also for About Us, sub menu shall start from same li, not from first li.
The li elements in the top level navigation (ie Home, Home Remedies, etc), can not have a relative position (position:relative;) to its parent ul.
You will need to make these li elements static. If you need the sub menu li elements to be relative then that's another story, but in order to push every to the left (under the first li), then the top level li elements need to be static.
http://jsfiddle.net/fwLgd99c/2/
I'm working with Wordpress menu where I have classic menu and item's submenus. When I hover some item which has children then submenu will show. The problem is when I have some page and I want to show fixed submenu of current page.
My JSFiddle is here http://jsfiddle.net/d2Lcukoe/ where you can see my menu and on hover "Live show" or "Elvis Presley" you will see submenu. And Elvis Presley is my current page - has css class current-menu-item. And I want to make its submenu visible without hover but still when I hover Live show to see its submenu (another submenu) and when I unhover then again see the current submenu.
I tried in last css class this:
.second-navigation ul > li.current-menu-item > ul {
visibility: visible;
}
It will show current submenu but I can't see another submenu of "Live show" on hover. How can I do that? I'm sorry for bad English.
The answer in JSFiddle would be best.
You should be able to achieve this by adding the following:
li.current-menu-item .sub-menu {
visibility: visible;
z-index: 100;
}
When the current menu item has a submenu, it is set to visible and the z-index is set to 100. The other submenu has a z-index if 101 so it will show and hide the other submenu.
Is it possible to remove an "active"-class from the menu items when hovering another menu item?
There's a working fiddle here. By default the home button has the "active"-class, whenever hovering over an other menu item i'd like to have that "active"-class removed. In this manner, only 1 menu item has the menu overlay ontop of it. Is this easy achievable by using CSS? Or do I need some fancy JavaScript?
The following piece of code will place the button overlay ontop of my menu items:
#menu li a.active,
#menu li a:hover{
text-decoration: none;
background: url('../images/menu_button_overlay.png');
background-repeat: no-repeat;
background-position: center top;
background-size: 30px 10px;
}
Thanks!
It would be possible with CSS.
#menu:hover .active {
background: none;
}
fiddle
You need to use Fancy Javascript. But even then, I doubt, it won't work because After you remove the active class from home any other menu item will have the overlay only till you hover it or click on it. If you do not click on any other menu item then in the end there won't be any overlay for any menu item.
You would need javascript (or more likely Jquery)
JQuery
$("li a").click(function () {
$(this).toggleClass("active");
$("li a").not(this).removeClass("active");
});
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;
}