CSS – hover visible another submenu

3 Views

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.

Read More

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.

Post Views: 3

Related posts

Leave a Reply

1 comment

  1. 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.