JSFiddle - React, Tailwind, and code Playground

by Abid Shaik

HTML

<div id="mapPDMenu">
    <div id="selstep">Map</div>
    <ul>
        <li><a href="#">Map</a></li>
        <li><a href="#">Products</a></li>
        <li><a href="#">Markers & Details</a></li>
        <li><a href="#">Overlays</a></li>
        <li><a href="#">Filters</a></li>
        <li><a href="#">Publishing</a></li>
    </ul>
</div>

CSS

/* user menu settings */
#mapPDMenu { 
  display: block;
  padding: 10px 0px;
  width: 266px;
  margin: 0 auto;
  position: relative;
  cursor: pointer;
  text-align: center;
  background: #881B1C;
  font-size: 1.2em;
  color: #fff;
  font-weight: normal;
  -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  -webkit-transition: all 0.15s linear;
  -moz-transition: all 0.15s linear;
  -ms-transition: all 0.15s linear;
  -o-transition: all 0.15s linear;
  transition: all 0.15s linear;
}
#mapPDMenu:hover { }

#mapPDMenu ul { 
  position: absolute;
  width: 266px;
  padding: 5px 0px;
  display: none;
  background: #fff;
  -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}
#mapPDMenu ul li { font-size: 0.9em; }

#mapPDMenu ul li a { 
  text-decoration: none;
  display: block;
  color: #555;
  padding: 7px 15px;
}
#mapPDMenu ul li a:hover {
  color: #fff;
  background: #666;
}

JavaScript

/*Simple Pop Down Menu Demo */
$("#mapPDMenu").on("click", function(e){
  e.preventDefault();
    if($(this).hasClass("open")) {
    $(this).removeClass("open");
    $(this).children("ul").slideUp();
  } else {
    $(this).addClass("open");
    $(this).children("ul").slideDown();
  }
});
$("#mapPDMenu ul li a").on("click", function(e){
$("#selstep").html(($(this).html())); 
})