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><div class="punkt"><a href="#">Веб-программирование</a>
            	<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;
		}
		
		.punkt {
			position: relative;
		}
		
		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; /*Отображаем подменю при наведении мыши*/ 
			width: inherit;
		}
		
		nav > ul > li:hover  ul > li:hover {
			background: #e38f35;
		}