DEV Community

AquaCat
AquaCat

Posted on

【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)