JSFiddle - React, Tailwind, and code Playground

by mobilat

HTML

<div class="menuOpen is_relative">

                    <div class="flag" class="display_none">
                        <ul class="flagMenu">
                            <li><a href="index.html">Homepage</a></li>
                            <li><a href="about.html">About us</a></li>
                            <li><a href="profile.html">Firm</a></li>
                        </ul>
                    </div><!-- / .flag -->

                </div>
            </div><!-- / .menu -->

CSS

.menuOpen {
    border: 1px solid green;
    position: relative;
        width: 20px;
    height: 20px;
    cursor: pointer;
    
}
.flag {
  display: none;
  position: absolute;
  top: -20px;
  left: 20px;
  width: 200px;
  min-height:200px;
  z-index: 10;
  overflow: hidden;
    background-color: aqua;
}



    .flag .flagMenu li a {
      display: block;
      padding: 0.625em;
      background-color: white;
      font-family: "Helvetica", Helvetica, Arial, sans-serif;
      color: #cccccc;
      text-decoration: none; }

JavaScript

$(".menuOpen").click(function(event){
        //event.preventDefault();
        //e.stopPropagation();

        $(".flag").toggle("fast");


        //$(this).toggleClass("active");
        //$(this).next("div").stop('true','true').slideToggle("slow");
        //return false;

    });