JSFiddle - React, Tailwind, and code Playground

by sheshu036

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="btn-group" role="group" aria-label="...">
    <div class="btn-group open" role="group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu">
            <li><a href="#">Dropdown link</a></li>
            <li><a href="#">Dropdown link</a></li>
            <li><a href="#">Dropdown link</a></li>
            <li><a href="#">Dropdown link</a></li>
            <li><a href="#">Dropdown link</a></li>
            <li><a href="#">Dropdown link</a></li>
            <li><a href="#">Dropdown link</a></li>
            <li><a href="#">Dropdown link</a></li>
            <li class="pd-dropdown">
                
                <a href="#" class="test sub">Has Sub Menu
                    <ul class="submenu">
                        <li><a href="#">Sub link</a></li>
                        <li><a href="#">Sub link</a></li>
                        <li><a href="#">Sub link</a></li>
                        <li><a href="#">Sub link</a></li>
                        <li><a href="#">Sub link</a></li>
                        <li><a href="#">Sub link</a></li>
                        <li><a href="#">Sub link</a></li>
                        <li><a href="#">Sub link</a></li>
                    </ul>
                </a>
            </li>
            
            
            <li><a href="#">Dropdown link</a></li>
            <li><a href="#">Dropdown link</a></li>
            <li><a href="#">Dropdown link</a></li>
            <li><a href="#">Dropdown link</a></li>
            <li><a href="#">Dropdown link</a></li>
            <li><a href="#">Dropdown link</a></li>
            <li><a href="#">Dropdown link</a></li>
  ...

CSS

.pd-dropdown a{color:red !important;}
.pd-dropdown .submenu{display:none;}
.pd-dropdown>a:after {display: block;content: " ";float: right;width: 0;height: 0;border-color: transparent;border-style: solid;border-width: 5px 0 5px 5px;border-left-color: #cccccc;margin-top: 5px;margin-right: -10px;}
.dropdown-menu{max-height:250px;overflow:auto;}

JavaScript

$('ul.dropdown-menu').on('click', function(event){
    event.stopPropagation();
});

$('ul.dropdown-menu').on('click', function(){
    $('.submenu').toggle();
});
$('.test').on('click',function(){
console.log("gdfg");
    $('ul.dropdown-menu').scrollTop(500);
});