Add class and display block on click menu item

Lerry 0
Viewed 28

i have html menu with submenu for ex:

<li id="item-3" class="menu-item has-children-3">
                    <a href="#" class="sf-with-ul"><span>Auto</span></a>
                <ul class="sub-menu fadeOut animated fast" id="cpx" style="">
                    <li id="menu-item-9" class="menu-item"><a href="#"><span>Reno яхту</span></a></li>
                    <li id="menu-item-6" class="menu-item"><a href="#"><span>Audi</span></a></li>
                </ul>
                </li>

When i make mouseover on menu Auto, i need to replace for ul fadeOut to fadeIn and add to style="display:block" and after mouseout add to style="display:none" and to class add fadeOut to ul element?

menu javascript
1 Answers

You can try to achieve this only with css and element+element selector https://www.w3schools.com/cssref/sel_element_pluss.asp eg:

.sf-with-ul:hover + .sub-menu { 
  display: block; 
  opacity: 1;
}

however this might not be the effect you want as the moment you mouse out of anchor element with class sf-with-ul trying to click on some of the sub menu items the whole sub menu will go back to "display:none; state" maybe better apply this to the whole parent li like

.menu-item.has-children-3:hover .sub-menu { 
  display: block; 
  opacity: 1;
}
Емил Цоков0
Related