Good day!

There is a markup:

<li class="drop-down"><a id="new_menu" href="#">Menu item</a> <ul class="drop-down-ul animated fadeIn"> <li class="flyout-right"><a id="new_menu_sm" href="#">Sub menu 1</a>Еще блок с контентом, выпадающий при hover...</li> <li class="flyout-right"><a href="#">Sub menu 2</a>Еще блок с контентом, выпадающий при hover...</li> <li class="flyout-right"><a href="#">Sub menu 3</a>Еще блок с контентом, выпадающий при hover...</li> </ul> </li>

I need to, when hovering over the Menu item, drop a list with a submenu (it works), while it is important that the first item under the menu is open. This requires a hover simulation for id = "new_menu_sm" when id = "new_menu" in the hover state.

There was a thought to do so:

 $('#new_menu').hover(function(){ $("#new_menu_sm").mouseenter(); });

But unfortunately, for some reason, it does not work: (

UPD: https://codepen.io/anon/pen/RMEBEa - here the menu on which the code I give does not work. When hovering over Flyout, the item Flyout right must be active. It is important that the hover on Flyout right is active, so that the user understands where the submenu comes from. More importantly, when the user points to a point below, Flyout right ceased to be active. The script that I brought, should do it, but for some reason does not.

  • one
    for some reason it seems to me that the problem is solved purely by the rules of css for the first element of the open list. - teran
  • Why doesn’t it work if to substitute an element accordingly, should it open? - Roman C
  • codepen.io/arjunamgain/pen/YXBeLJ - This is the menu to which I am trying to apply this business ... id = "new_menu" - Flyout, id = "new_menu_sm" - Flyout Right and the script I wrote above. The idea should work, but. - John Doe
  • codepen.io/anon/pen/KobeQz xs why are you here js - teran
  • In my menu, the submenus following the first submenu open to the right too. In your example, the Flyout Right item is inactive, so it’s unclear to the user which of the sub-items is open ... When opening the items below, the first one is not removed ... In general, there is no way without JS. The script I wrote above is the simplest solution to the issue, but for some reason it does not work. - John Doe

1 answer 1

Try instead of hover to create a separate class in css and through jquery add it to new_menu_sm

  • I'm afraid that we need a hover simulation ... - John Doe
  • codepen.io/arjunamgain/pen/YXBeLJ - This is the menu to which I try to apply this business ... id = "new_menu" - Flyout, id = "new_menu_sm" - Flyout Right and the script I wrote above. The idea should work, but. - John Doe
  • In this code, the display class is also used, which is switched by clicking on the menu. In your case, not by pressing, but at the time of hover (handlerIn). So I advise: to convert hover into a separate class and also switch it. - Sergey Koreshkov
  • Thanks, you'll have to do something similar if I can't get the initial script to work. That would be the easiest ... - John Doe