JSFiddle - React, Tailwind, and code Playground

by Viruthagiri

HTML

<ul class="awesome-menu">
            <li>
                <a href="#">Profile<span class="notification red">6</span></a>
                <ul><li>Text1</li><li>Text1</li>

</ul>



            </li>
            <li>
                <a href="#">Settings<span class="notification yellow">1</span></a>                <ul><li>Text1</li><li>Text1</li></ul>

            </li>
            <li>
                <a href="#">Notifications<span class="notification blue">42</span></a>
            </li>
            <li>
                <a href="#">Logout</a>
            </li>
        </ul>

CSS

* {
                margin: 0px;
                padding: 0px;
            }
            body {
                background: #ededed;
                text-align: center;
                margin-top: 125px;
                font-family: "Helvetica-Neue", "Helvetica", Sans-Serif;
                font-size: 11px;
            }
            a {
                color: inherit;
            }
            p {
                color: #161616;
                margin-top: 62px;
            }
            
            ul.awesome-menu {
                display: inline-block;
                
                border: 1px solid #ccc;
                border-radius: 3px;
                
                list-style: none;
                font-size: 12px;
                
                -webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.06),
                                    inset 0px 1px 1px #fff;
                -moz-box-shadow:     0px 1px 2px rgba(0,0,0,0.06),
                                    inset 0px 1px 1px #fff;
                -o-box-shadow:         0px 1px 2px rgba(0,0,0,0.06),
                                    inset 0px 1px 1px #fff;
                box-shadow:         0px 1px 2px rgba(0,0,0,0.06),
                                    inset 0px 1px 1px #fff;
            }
                ul.awesome-menu > li {
                    display: block;
                    float: left;
                }
                    ul.awesome-menu > li > a {
                        display: block;
                        
                        background-color: #f2f2f2;
                        background-image: -webkit-gradient(linear, left bottom, left top,
                            color-stop(0, #f0f0f0),
                            color-stop(1, #f9f9f9)
                        );
                        background-image: -webkit-linear-gradient(#f9f9f9, #f0f0f0);
                        background-image:      -moz-linear-gradient(#f9f9f9, #f0f0f0);
                       ...

JavaScript

$(function(){
    $("ul.awesome-menu li").hover(function(){  
        $(this).children("ul").slideDown();
    },function(){$(this).children("ul").slideUp()})
})