JSFiddle - React, Tailwind, and code Playground

by Mak_Pet

HTML

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Горизонтальное многоуровневое меню</title>
    <link rel="stylesheet" href="style.css" />
</head>

<body>
    <ul id="menu-header" class="menu">
        <li id="menu-item" class="menu-item"><a>Пункт 1</a>
            <ul class="sub-menu">
                <li id="menu-item" class="menu-item"><a href="#" aria-current="page">Пункт 1.2</a></li>
            </ul>
        </li>
        <li id="menu-item" class="menu-item"><a>Пункт 2</a>
            <ul class="sub-menu">
                <li id="menu-item" class="menu-item"><a>Пункт 2.1</a>
                    <ul class="sub-menu">
                        <li id="menu-item" class="menu-item"><a>Пункт 2.1.1</a></li>
                        <li id="menu-item" class="menu-item"><a>Пункт 2.1.2</a></li>
                        <li id="menu-item" class="menu-item"><a>Пункт 2.1.3</a></li>
                    </ul>
                </li>
                <li id="menu-item" class="menu-item"><a href="#">Пункт 2.2</a>
                    <ul class="sub-menu">
                        <li id="menu-item" class="menu-item"><a>Пункт 2.2.1</a></li>
                        <li id="menu-item" class="menu-item"><a>Пункт 2.2.2</a></li>
                        <li id="menu-item" class="menu-item"><a>Пункт 2.2.3</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</body>
</html>

CSS

#menu-header {
    margin: 0;
    padding: 0;
    list-style: none;
    color: #5f727f;
    background: #fff;
    border: 1px solid #dfe5e8;
    width: 300px;
}

#menu-header a {
    display: block;
    width: 100%;
    padding: 10px;
    color: #5f727f;
    transition: 0.1s all;
}

#menu-header a:hover {
    color: #fff;
    background: #729fca;
    padding: 10px 0 10px 20px;
    border-left: 3px solid #4179ae;
}

.sub-menu > .sub-menu {
    color: red;
}

.sub-menu {
    margin: 0;
    padding: 0;
    list-style: none;
    color: #5f727f;
    background: #f4f6f7;
    border: 1px solid #dfe5e8;
    position: absolute;
    width: 300px;
    left: 300px;
    z-index: 1000;
    opacity: 0;
    top: -9999em;
}
.menu-item {
    position: relative;
}

.menu-item:hover > .sub-menu {
    opacity: 1;
    top: 0;
}