JSFiddle - React, Tailwind, and code Playground

HTML

<header>
    	<div class="logo"></div>
        
      	<ul class="menuHeader">
        	<li><a href="#"><img src="images/home.gif" alt="На главную страницу" title="Главная страница"></a></li>
            <li><a href="#"><img src="images/contact.gif" alt="Контакты" title="Контакты"></a></li>
            <li><a href="#"><img src="images/mapSite.gif" alt="Карта сайта" title="Карта сайта"></a></li>
        </ul>
        
        <form id="searchNav" action="/">
        	<fieldset>
            	<label>Поиск по сайту</label>
                <p><input type="search" name="find">
                <input type="submit" value=""></p>
            </fieldset>
        </form>
    </header>
    
    <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>
            	<ul>
                	<li><a href="#">JavaScript</a></li>
                    <li><a href="#">PHP</a></li>
                    <li><a href="#">Perl</a></li>
                </ul>
            </li>
            <li><a href="#">Ресурсы</a></li>
            <li><a href="#">Статьи</a></li>
            <li><a href="#">Форум</a></li>
        </ul>
    </nav>

CSS

header, nav, aside, article, footer, section {
	display: block;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;  /*Убираем маркеры в списках на сайте*/ 
}

/*-------------------- Шапка сайта -------------------------*/

header {
	height: 180px;
	position: relative;
	/*outline: 1px solid #cc0000;*/
}

.logo {
	position: absolute;
	top: 50px;
	left: 50px;
	width: 439px;
	height: 76px;
	background: url(../images/logotip.gif) no-repeat;
}

.menuHeader a img {
	border: none; /*Убираем рамки вокруг иконок*/ 
}

.menuHeader {
	position: absolute;
	top: 90px;
	right: 35%;
}

.menuHeader li {
	float: left;
	margin: 0 4px;  /*Задаем расстояние между иконками*/ 
}

#searchNav fieldset {
	position: absolute;
	top: 58px;
	right: 60px;
	width: 200px;
	border: none;
}

#searchNav fieldset label {
	display: block;
	font-size: 14px;
	text-shadow: 1px 0 0 #868688;
}

#searchNav fieldset p {
	margin: 8px 0 0 0;
}

input[type="search"] {
	width: 158px;
	border: 1px solid #656b8d;
}

#searchNav input[type="submit"] {
	width: 22px;
	height: 19px;
	margin-left: 7px;
	border: none;
	background: url(../images/search.gif) no-repeat;
}

input:focus {
	outline: none; */ /*Отменяем отображение светящейся рамки при фокусе*/ 
}

/*----------------- Горизонтальная навигация ----------------------*/

nav {
	margin-bottom: 35px; /* Задаем отступ до блока с контентом */
	background: #f6f6f8;
	height: 25px;
	/*outline: 1px solid #999;*/
}

nav ul {
	display: table-row; /* Табличные свойства задаем, чтобы меню было резиновым,
							а не фиксированным, как при float */
}

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; /*Ширину ссылки задаем на всю ширину окна, чтобы меню...