CSS - hover visible another submenu

Question

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.

Howli Howli · Accepted Answer · 2015-02-04T00:03:39

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.

CSS - hover visible another submenu

1 Answers