DEV Community

AquaCat
AquaCat

Posted on

3 1

【jQuery】How to code drop-down(pop-down) menu

How the drop-down menu works is as below.
1.Click a button.
2.A list of menu is displayed.
3.The menu does not close as long as the cursor is on the button.

Let's code using jQuery!!

HTML

<ul class="container">
      <li>
        CLICK!!
        <ul class="popdown_menu">
          <li><a href="#">item1</a></li>
          <li><a href="#">item2</a></li>
          <li><a href="#">item3</a></li>
          <li><a href="#">item4</a></li>
        </ul>
      </li>
    </ul>

Enter fullscreen mode Exit fullscreen mode

jQuery (JavaScript)

$(".container li").hover(function(){
            $(".popdown_menu").slideToggle()
        });
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay