JSFiddle - React, Tailwind, and code Playground

by Александр Парчагин

HTML

<ul class="menu">
    <li><a href="">Первый пункт</a>
        <ul class="submenu">
            <li><a href="">Первый подпункт1</a></li>
            <li><a href="">Второй подпункт1</a></li>
            <li><a href="">Третий подпункт1</a></li>        
            <li><a href="">Четвертый подпункт1</a></li>
        </ul>
    </li>
    <li><a href="">Второй пункт</a>
        <ul class="submenu">
            <li><a href="">Первый подпункт2</a></li>
            <li><a href="">Второй подпункт2</a></li>
            <li><a href="">Третий подпункт2</a></li>        
            <li><a href="">Четвертый подпункт2</a></li>
        </ul>
    </li>
    <li><a href="">Третий пункт</a>
        <ul class="submenu">
            <li><a href="">Первый подпункт3</a></li>
            <li><a href="">Второй подпункт3</a></li>
            <li><a href="">Третий подпункт3</a></li>        
            <li><a href="">Четвертый подпункт3</a></li>
        </ul>
    </li>
    <li><a href="">Четвертый пункт</a>
        <ul class="submenu">
            <li><a href="">Первый подпункт4</a></li>
            <li><a href="">Второй подпункт4</a></li>
            <li><a href="">Третий подпункт4</a></li>        
            <li><a href="">Четвертый подпункт4</a></li>
        </ul>
    </li>
</ul>

CSS

.menu, .submenu{  
    margin:0;
    padding:0;
    list-style:none;
    text-align:center;
    font-size:0;
}
.menu > li, .submenu > li{
    display:inline-block;
}
.menu > li > a, .submenu > li > a{
    display:block;
    padding:10px 15px;
    font-size:16px;
    text-decoration:none;
}
.menu{
    background:#2B689E;
    position:relative;
}
.menu > li > a{
    color:#fff;
    position:relative;
}
.submenu{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:#FFA101;
    display:none;
}
.submenu > li > a{
    color:#323233;
}
.menu > li:hover .submenu{
    display:block;
}
.menu > li:hover > a:after{
    content:'';
    width:20px;
    height:20px;
    position:absolute;
    top:100%;
    left:50%;
    margin-left:-10px;
    background:#FFA101;
    transform:rotate(45deg);
}