Displaying a dropdown menu on hover and replacing CSS classes

Envato Authors Author Hangout
1

Two elements that needs to be manipulated with JS:

  • For the above element:
    I want OnMouseHover to replace the class value:
    PopupClose with PopupOpen

    At the same time, the above element style attribute to change its value from:
    display: none; to display: block;

    Sample of HTML structure:

    <li class="navTab myFirstTab Popup PopupControl PopupClosed     PopupContainerControl">
  <a href="#" class="navLink">On hover I should have a DropDown</a>
  <a href="#" class="SplitCtrl" rel="Menu"></a>
</li>

 <li class="navTab mySecondTab Popup PopupControl PopupClosed PopupContainerControl uix_rightMost">
    <a href="#"  class="navLink">On hover I should have a DropDown​2</a>
    <a href="#" class="SplitCtrl"      rel="Menu"></a>
 </li>
                        <!-- members -->
                        <!-- extra tabs: end -->
                        <!-- responsive popup -->
                        <li class="navTab navigationHiddenTabs navTab--j    justIcon Popup PopupControl PopupClosed PopupContainerControl" style="display: none;">
                            <a rel="Menu" class="navLink NoPopupGadget uix_dropdownDesktopMenu"><i class="uix_icon uix_icon-navOverflow"></i><span class="uix_hide menuIcon">ham</span></a>
                        </li>

    My First drop down menu title

    My Second drop down menu title

    Here is my webpage link for any refrence: Website

    • 2

    Hi AlishaHadden

    TBH not too sure exactly what you need/want; however this could all be done without JS just pure CSS - example:

    `

  • On hover I have a DropDown
    • `

    The CSS would could be as simple as:

    li.on-hover-class{ 
  display block /* or whatever
 position:relative;
}

li.on-hover-class ul{ 
  display:none
  position:absolute;
}

li.on-hover-class:hover ul{ 
  display:block
}

    OK, from that you can add float/positioning or even use flex and obviously colours etc.