JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
    	<ul class="menu">
        	<li><a href="#">Создание сайта</a></li>
            <li><a href="#">Веб-дизайн</a></li>
            <li><a href="#">(X)HTML</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">CMS</a></li>
            <li><a href="#">Веб-программирование</a>
            	<div class="wrap">
	            	<ul>
	                	<li><a href="#">JavaScript</a></li>
	                    <li><a href="#">PHP</a></li>
	                    <li><a href="#">Perl</a></li>
	                </ul>
		        </div>
            </li>
            <li><a href="#">Ресурсы</a></li>
            <li><a href="#">Статьи</a></li>
            <li><a href="#">Форум</a></li>
        </ul>
    </nav>

CSS

nav {
      display: block;
      margin: 20px auto;
      outline: 1px solid #000;
      height: 25px;
      min-width: 980px;
    }
    
    nav > ul {
      margin: 0;
      padding: 0;
      list-style: none;
      display: table-row;
      position: absolute;
      /*top: 25px;*/
    }
    
    nav ul li {
      position: relative;
      display: table-cell; /* Элемент, как ячейка таблицы */
      text-align: center;
      vertical-align: bottom;  /*чтобы при сужении окна текст оставался отцентрированным*/ 
    }
    
    nav a {
      text-decoration: none; /*Убираем подчеркивание у ссылок */
      color: #000;
      height: 25px;  /*Высоту задаем, чтобы потом выровнять текст по центру */
      width: 1300px; /*Ширину ссылки задаем на всю ширину окна, чтобы меню растягивалось */
      display: table-cell;
      font-size: 13px;
      font-weight: bold;
      vertical-align: middle;
    }
    
    nav li:hover {
      background: #e27e0f;
    }
    
    nav > ul > li:hover a {
      color: #fff; 
    } 
    
    nav > ul > li  ul {
      position: absolute;
      /*top: 25px;*/
      display: none;  /* Скрываем подменю */
      background: #e59a49;
    }
    
    nav > ul > li  ul > li { /* В подменю свое выравнивание (не по центру) */
      text-align: left;
      padding-left: 10px;
      display: block ;
    }
    
    nav > ul > li:hover  ul {
      display: block; /* Отображаем подменю при наведении мыши*/
      
    }
    
    nav > ul > li:hover  ul > li:hover {
      background: #e38f35;
      
    }

    .wrap{
      position: relative;
    }