JSFiddle - React, Tailwind, and code Playground

by JeffreyTaylor

HTML

<ul id='test-two'>
    <li class="menuItem"><span>A</span>
            <ul class="group-list">
                <li>
                    <div class="group-title">Group 1</div>
                    <div class="group-content">
                        <a href="">Item 1</a>
                    </div>
                </li>
                <li>
                    <div class="group-title">Section 2</div>
                    <div class="group-content">
                        <a href="">Item 1</a>
                    </div>
                </li>                     
                <li>
                    <div class="group-title">Section 3</div>
                    <div class="group-content">
                        <a href="">Item 1</a>                        
                        |
                        <a href="">Item 2</a>                        
                        |
                        <a href="">Item3</a>                        
                        <br/>                                             
                    </div>
                </li>
                <li>
                    <div class="group-title">Section 4</div>
                    <div class="group-content">
                        <a href="">Item 1</a>                        
                        |
                        <a href="">Item 2</a>                        
                        |
                        <a href="">Item3</a>                        
                        <br/>                                             
                    </div>
                </li>
                <li>
                    <div class="group-title">Section 5</div>
                    <div class="group-content">
                        <a href="">Item 1</a>                        
                        |
                        <a href="">Item 2</a>                        
                        |
                        <a href="">Item3</a>                        
            ...

CSS

#test-two
{
        margin-top: 50px;
}
.menuItem
     {
         background-color: #B9F1FC;
         text-align:center;
         cursor: pointer;
         width: 50px;
         margin-bottom:0.09em;
     }
     
     .menuItem:hover 
     {
         background-color: #3CA0E2;
         text-decoration: underline;
     }
     
     .group-list
     {
         background-color: #8FA9C7;
         display: none;
         width: 100px;
         margin-left:50px;
         position:absolute;       
     }
     
     .group-title
     {
        text-align:left;
        font-weight:bold;         
     }
     
     .group-content
     {
        text-align:left;
        padding-left:2px;         
     }
     
     a:hover
     {
         text-decoration: underline;
     }

JavaScript

$('.menuItem').mouseenter(function(e) {
    var groupList = $(e.target).find('.group-list');
    groupList.css({
        'margin-top': (-groupList.height() / 2) + 'px'
    });
    groupList.show();
});

$('.menuItem').mouseleave(function(e) {
    $('.group-list').hide();
});