JSFiddle - React, Tailwind, and code Playground

by Shidhin C R

HTML

<ul class="menu">
    
    <li>Sorty by
        <ul class="border"></ul>
        <ul class="submenu">
            <li>Popularity</li>
            <li>Price low to high</li>
            <li>Price high to low</li>
            <li>Discount</li>
            <li>Relevance</li>
        </ul>
    </li>
</ul>

CSS

ul,li {
    list-style :none;
}
.menu {
    cursor: pointer;
    margin : 100px;
    display: inline-block;
}
.menu:hover .submenu {
    display: block;
    margin-left: -33px;
    border: 1px solid black;
    text-align:center;
}
.menu > li {
    width: 72px;
    border: 1px solid black;
    text-align: center;
}
.menu:hover > li {
    border-bottom: 1px solid #fff;
    margin-bottom: -1px;
}
.submenu > li {
   padding: 2px 10px;
}
.submenu li:hover {
    background-color: #ccc;
}
.submenu {
    position: absolute;
    display : none;
    font: 17px normal arial;
}
.menu:hover .border {
    border: 1px solid #fff;
    margin-bottom: -1px;
    width: 70px;
    position: absolute;
    z-index: 100;
}