JSFiddle - React, Tailwind, and code Playground
HTML
<div class="input-group-btn">
<button class="btn" data-toggle="collapse">
<span class="current" data-url="">Submenu1</span> <span class="right">∇</span>
</button>
<ul id="categories" class="dropdown-menu">
<li><a href="#" class="unicode ieUnicode">Submenu2</a></li>
<li><a href="#" class="unicode ieUnicode">Submenu3</a></li>
<li><a href="#" class="unicode ieUnicode">Submenu4</a></li>
<li><a href="#" class="unicode ieUnicode">Submenu5</a></li>
<li><a href="#" class="unicode ieUnicode">Submenu6</a></li>
</ul>
</div>
CSS
.input-group-btn{
position:relative;
}
.btn{
width:300px;
background-color:#ddd;
color:red;
border:1px solid #ccc;
padding:10px;
font-size:20px;
text-align:left;
cursor:pointer;
}
.btn .right{
color:#fff;
background-color:#000;
border-radius:50%;
display:inline-block;
padding:0 5px;
float:right;
}
.dropdown-menu{
background-color: #ddd;
border: 1px solid #ccc;
list-style: none outside none;
padding: 0;
position: absolute;
top: 34px;
width: 300px;
display:block;
display:none;
}
.dropdown-menu li{
border-bottom:1px solid #ccc;
padding:10px;
cursor:pointer;
}
.dropdown-menu li a{
text-decoration:none;
color:red;
}
.dropdown-menu li:hover,
.btn:hover {
background-color:green;
color#fff;
}
.dropdown-menu li:hover a{
color:white;
}
.input-group-btn.open .dropdown-menu{
display:block;
}
.dropdown-menu .right{
color:#fff;
background-color:#000;
border-radius:50%;
display:inline-block;
padding:0 5px;
float:right;
}
JavaScript
$('.btn').click(function(){
$(this).parent().toggleClass('open'); //how use li appendto btn and dropdown-menu is hide
});
$('.dropdown-menu li').click(function(){
$(this).closest('.dropdown-menu').find('.right').remove();
$(this).append('<span class="right">∇</span>')
});