JSFiddle - React, Tailwind, and code Playground

by Sergey Goryachev

HTML

<ul class="mainmenu">
    <li><a href="/">Пункт 1</a>
        <ul class="dropdawn">
            <li><a href="/">Подпункт 1</a></li>
            <li><a href="/">Подпункт 2</a></li>
            <li><a href="/">Подпункт 3</a></li>
        </ul>
    </li>
    <li><a href="/">Пункт 2</a>
        <ul class="dropdawn">
            <li><a href="/">Подпункт 1</a></li>
            <li><a href="/">Подпункт 2</a></li>
            <li><a href="/">Подпункт 3</a></li>
        </ul>
    </li>
    <li><a href="/">Пункт 3</a></li>
    <li><a href="/">Пункт 4</a></li>
    <li><a href="/">Пункт 5</a></li>
</ul>

CSS

body {
    background: #666666;
}
* {
    margin: 0;
    padding: 0;
    list-style: none;
}
.mainmenu {
    width: 400px;
    background: #888888;
    padding: 0 10px 5px;
    border-radius: 0 0 5px 5px;
}
.mainmenu li {
    margin: auto;
}
.mainmenu li:first-child {
    border-top: 1px solid #fff;
}
.mainmenu li:last-child {
    border-bottom: 1px solid #000;
}
.mainmenu a {
    line-height: 40px;
    display: block;
    border-top: 1px solid #000;
    border-bottom: 1px solid #fff;
    color: #ffffff;
    text-decoration: none;
}
.mainmenu a:hover {
    background: #212121;
}
.dropdawn a {
    border: none;
    padding: 0 10px;
    line-height: 30px;
}
.dropdawn {
    padding: none;
}
.dropdawn li:first-child {
    border-top: 1px solid #000;
}
.dropdawn li:last-child {
    border-bottom: 1px solid #fff;
}