JSFiddle - React, Tailwind, and code Playground

by slawe

HTML

<div id="proMonthddl">
    <span>Select Month</span>
<ul>
<li id="january"><span>1</span>Jan </li>
<li id="february"> <span>2</span>Feb</li>
<li id="march"><span>300</span>March </li>
</ul>
</div>

CSS

body{padding:30px}

div#proMonthddl { 
    cursor:pointer;
width:100px;
  -webkit-appearance: button;
    -moz-box-shadow: 0 1px 0 #dddddd, 0 1px 3px rgba(0, 0, 0, 0.08);
    -moz-border-radius: 35px;
  border-radius: 35px;
  -webkit-border-radius: 2px;
  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
  -webkit-padding-end: 10px;
  -webkit-padding-start: 5px;
  -webkit-user-select: none;
  background-image: url(http://www.focusdashboard.com/img/sel-arrow.gif), 
  -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
  background-position: 96% 50%;
  background-repeat: no-repeat;
  border: 1px solid #dddddd;
  color: #555;
  font-size: inherit;
  margin: 0;
  overflow: hidden;
  padding-top: 2px;
  padding-bottom: 2px;
  text-overflow: ellipsis;
  white-space: nowrap;

}

#proMonthddl ul li span{
    font:11px arial;
    background:#5c78a4;
    text-align:center;
    height: 15px;
    min-width: 15px;
    border-radius:15px;
    text-indent:none;
    border:2px solid #fff;
    color:#fff;
    display:block;
    position:relative;
    float: right;
   
    text-shadow:1px 1px rgba(000, 000, 000, 0.5);
    -webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, .4);
    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, .4);
}



div > ul { display: none; }
div:hover > ul {display: block;}
div:hover > ul > li { padding-top: 5px;padding-bottom:5px; border-top: 1px dotted #ddd;}
div:hover > ul > li:hover { background: #dcdcdc;}
div:hover > ul > li:hover > a { color: red; }

JavaScript

$("li").click(function (){
   
var m = $(this).attr("id");
    $("#proMonthddl span:first").text(m)
    alert(m)
    
});