JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<ul id="nav">
    <li>
        <a href="#" title="Хинт">Меню 1</a>
        <ul>
            <li><a href="#">Подменю 1</a></li>
            <li><a href="#">Подменю 2</a></li>
            <li><a href="#">Подменю 3</a></li>
            <li><a href="#">Подменю 4</a></li>
            <li><a href="#">Подменю 5</a></li>
        </ul>
    </li>
    <li>
        <a href="#" title="Хинт">Меню 2</a>
        <ul>
            <li><a href="#">Подменю 1</a></li>
            <li><a href="#">Подменю 2</a></li>
            <li><a href="#">Подменю 3</a></li>
            <li><a href="#">Подменю 4</a></li>
            <li><a href="#">Подменю 5</a></li>
        </ul>
    </li>
    <li>
        <a href="#" title="Хинт">Меню 3</a>
        <ul>
            <li><a href="#">Подменю 1</a></li>
            <li><a href="#">Подменю 2</a></li>
            <li><a href="#">Подменю 3</a></li>
            <li><a href="#">Подменю 4</a></li>
            <li><a href="#">Подменю 5</a></li>
        </ul>
    </li>
    <li>
        <a href="#" title="Хинт">Меню 4</a>
        <ul>
            <li><a href="#">Подменю 1</a></li>
            <li><a href="#">Подменю 2</a></li>
            <li><a href="#">Подменю 3</a></li>
            <li><a href="#">Подменю 4</a></li>
            <li><a href="#">Подменю 5</a></li>
        </ul>
    </li>
    <li>
        <a href="#" title="Хинт">Меню 5</a>
        <ul>
            <li><a href="#">Подменю 1</a></li>
            <li><a href="#">Подменю 2</a></li>
            <li><a href="#">Подменю 3</a></li>
            <li><a href="#">Подменю 4</a></li>
            <li><a href="#">Подменю 5</a></li>
        </ul>
    </li>
</ul>

CSS

#nav{
    float:left;
    width:100%;
    list-style:none;
    font-weight:bold;
    margin-bottom:10px;
}
#nav li{
    float:left;
    margin-right:10px;
    position:relative;
    display:block;
}
#nav li a{
    display:block;
    padding:5px;
    color:#fff;
    background:#333;
    text-decoration:none;
    
    text-shadow:1px 1px 1px rgba(0,0,0,0.75); /* Тень текста, чтобы приподнять его на немного */
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    border-radius:2px;
}
#nav li a:hover{
    color:#fff;
    background:#6b0c36;
    background:rgba(107,12,54,0.75); /* Выглядит полупрозрачным */
    text-decoration:underline;
}
 
/*--- ВЫПАДАЮЩИЕ ПУНКТЫ ---*/
#nav ul{
    list-style:none;
    position:absolute;
    left:-9999px; /* Скрываем за экраном, когда не нужно (данный метод лучше, чем display:none;) */
    opacity:0; /* Устанавливаем начальное состояние прозрачности */
    -webkit-transition:0.25s linear opacity; /* В Webkit выпадающие пункты будут проявляться */
}
#nav ul li{
    padding-top:1px; /* Вводим отступ между li чтобы создать иллюзию разделенных пунктов меню */
    float:none;
    background:url(dot.gif);
}
#nav ul a{
    white-space:nowrap; /* Останавливаем перенос текста и создаем многострочный выпадающий пункт */
    display:block;
}
#nav li:hover ul{ /* Выводим выпадающий пункт при наведении курсора */
    left:0; /* Приносим его обратно на экран, когда нужно */
    opacity:1; /* Делаем непрозрачным */
}
#nav li:hover a{ /* Устанавливаем стили для верхнего уровня, когда выводится выпадающий список */
    background:#6b0c36;
    background:rgba(107,12,54,0.75); /* Выглядит полупрозрачным */
    text-decoration:underline;
}
#nav li:hover ul a{ /* Изменяем некоторые стили верхнего уровня при выводе выпадающего пункта */
    text-decoration:none;
    -webkit-transition:-webkit-transform 0.075s linear;
}
#nav li:hover ul li a:hover{ /* Устанавливаем стили для выпадающих пунктов, когда курсор наводится на конкретный пункт */
   ...