JSFiddle - React, Tailwind, and code Playground

by yijiang

HTML

<ul class="dropdown">
    <li class="headlink">
        <a href="#">Menu</a>
        <ul class="arrowlist invisible">
            <li>Hello 1</li>
            <li>Hello 2</li>
            <li>Hello 3</li>
        </ul>
    </li>
    <li class="headlink">
        <a href="#">Menu</a>
        <ul class="arrowlist invisible">
            <li>Hello 1</li>
            <li>Hello 2</li>
            <li>Hello 3</li>
        </ul>
    </li>
    <li class="headlink">
        <a href="#">Menu</a>
        <ul class="arrowlist invisible">
            <li>Hello 1</li>
            <li>Hello 2</li>
            <li>Hello 3</li>
        </ul>
    </li>
    <li class="headlink">
        <a href="#">Menu</a>
        <ul class="arrowlist invisible">
            <li>Hello 1</li>
            <li>Hello 2</li>
            <li>Hello 3</li>
        </ul>
    </li>
</ul>

<br class="clear" />

CSS

.dropdown {
    z-index: 1;
    float: right;
}

.dropdown .headlink {
    position: relative;
}

.dropdown li {
    float: left;
}

.dropdown a {
    outline: none;
    padding: 3px 18px 6px;
    display: block;
    background: #666;
    color: white;
    border-left: 1px solid #ccc;
    text-decoration: none;
}

.dropdown a:hover {
    background: #999;
}

.dropdown ul {
    border: 1px solid #C7C9CF;
    
    left: 0;
    position: absolute;
    top: 100%;
    z-index: 100;
    
    display: none;
}

.dropdown ul.last {
    right: 0;
    left: auto;
 }

.dropdown ul li {
    white-space: nowrap;
    color: white;
    padding: 2px 20px 3px;
    background: orange;
    cursor: pointer;
}

.dropdown ul li:hover {
    background: #386495;
}

JavaScript

$('.dropdown > li').click(function() {
    $('ul', this).slideDown(100);
}).mouseleave(function() {
    $('ul', this).slideUp(100)
});

$('.dropdown > li > ul').last().addClass('last');