Displaying a dropdown menu on hover and replacing CSS classes


#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.