Response title
This is preview!
I am trying to achieve this via jQuery by adding a class as I don't think it's possible to do with CSS. Been struggling for two days still can't get the code calls the right class.
The menu is generated by the CMS system so there is restriction to adding new class directly to a specific menu item. It's a 3 level menu but the flyout starts from second level (2nd level menu 3).
By default, the 1st level menu has a "top-level" class for anchor tag while 2nd and 3rd level don't have. What I want (and thought the easier way) to achieve is to target the "top-level" to find the "2nd level menu 3", so that I can add a "current" class for "2nd level menu 3", so that when flyout menu expanded, and cursor moves to the third level, the "2nd level menu 3" has the same white background color as the hover does.
By default, the 1st level menu has a "top-level" class for anchor tag while 2nd and 3rd level don't have. What I want (and thought the easier way) to achieve is to target the "top-level" to find the "2nd level menu 3", so that I can add a "current" class for "2nd level menu 3", so that when flyout menu expanded, and cursor moves to the third level, the "2nd level menu 3" has the same white background color as the hover does.
I have this code in which the last line is how I want to add the "current" class.
- jQuery('#nav ul>li').find('a.level-top').parent('li').addClass('current')
- jQuery$(document).ready(function(){
- jQuery("#nav li li").hover(function(){
- jQuery(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);
- },function(){
- jQuery(this).find('ul:first').css({visibility: "hidden"});
- });
- });
- jQuery(document).ready(function(){
- jQuery('#nav ul>li').find('a.level-top').parent('li').addClass('current')
- });
1