JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<div class="zornet_kidsagun">
    <ul>
        <li><a href="#">ZORNET.RU 1</a></li>
        <li>
            <a href="#">ZORNET.RU 2</a>
            <ul>
                <li><a href="#">Подменю № 1</a></li>
                <li><a href="#">Подменю № 2</a></li>
            </ul>
        </li>
        <li><a href="#">ZORNET.RU 3</a></li>
        <li><a href="#">ZORNET.RU 4</a></li>
    </ul>
</div>

CSS

.zornet_kidsagun li {
    list-style: none;
    display: inline-block;
    background: #c3c0c0;
    position: relative;
    border: 1px solid #b3adad;
}
.zornet_kidsagun li:hover{
    background:#eee;
}
.zornet_kidsagun li a {
    color: #2b2626;
    padding: 7px 9px;
    text-decoration: none;
    display: block;
}
.zornet_kidsagun li ul{
    display:none;
    position:absolute;
    padding-left:0;
    width:119px;
    padding-top:2px;
}
.zornet_kidsagun li:hover ul{
    display:block;
    left:0px;
}