JSFiddle - React, Tailwind, and code Playground

by Nick Sdk

HTML

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>A641</title>
	<meta name="desription" content="">
	<meta name="keyword" content="">
	<link rel="stylesheet" href="../css/repeatstyles.css">
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="../css/normalize.css">
	<link href="https://file.myfontastic.com/jT8ke4pS6uaiJQuEtM8Pdk/icons.css" rel="stylesheet">
	<link href="http://allfont.ru/allfont.css?fonts=impact" rel="stylesheet" type="text/css" />
	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
	<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
	<header>
		<div class="container clearfix">
			<div class="logo_pageindex">
				<div class="logo">
					<a href="index.html">neftemoll.ru</a>
				</div>
				<div class="pageindex">
					<p>Мой кабинет</p>
				</div>
			</div>
			<div class="header_functions">
				<div class="all_services clearfix">
					<div class="user_services">
						<p>Мои сервисы:</p>
					</div>
					<div class="services_buttons">
						<a href="#">Золотой аккаунт</a>
						<a href="#">Прайс-лист</a>
						<a href="#">Шаблоны</a>
						<a href="#">Добавить объявление</a>
						<a href="#">Серебрянный аккаунт</a>
						<a href="#">Подписки</a>
						<a href="#">Анализ рынка</a>
						<a href="#">Оформить подписку</a>
					</div>
					<div class="information_center">
						<div class="option_list">
							<p>Центр информации<i class="icon-arrow-down"></i></p>
							<div class="hidden_list">
								<a href="#">Справка</a>
								<a href="#">Торговые инструметы</a>
								<a href="#">Размещение рекламы</a>
								<a href="#">Служба поддержки</a>
							</div>
						</div>
						<a href="#">выход</a>
					</div>
				</div>
			</div>
		</div>
	</header>
	<section>
		<div class="left_sidebar">
			
		</div>
	</section>

CSS

@charset "UTF-8";
    * {
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
      box-sizing: border-box
    }

    .container {
      max-width: 1440px;
      margin: 0 auto;
      position: relative
    }

    .clearfix:after {
      content: '';
      clear: both;
      display: block
    }

    @font-face {
      font-family: icon_font;
      src: url(../fonts/icon_font.eot);
      src: url(../fonts/icon_font.eot?#iefix) format("embedded-opentype"), url(../fonts/icon_font.woff) format("woff"), url(../fonts/icon_font.ttf) format("truetype"), url(../fonts/icon_font.svg#untitled-font-1) format("svg");
      font-weight: 400;
      font-style: normal
    }

    [data-icon]:before {
      font-family: icon_font!important;
      content: attr(data-icon);
      font-style: normal!important;
      font-weight: 400!important;
      font-variant: normal!important;
      text-transform: none!important;
      speak: none;
      line-height: 1;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale
    }

    [class*=" icon-"]:before,
    [class^=icon-]:before {
      font-family: icon_font!important;
      font-style: normal!important;
      font-weight: 400!important;
      font-variant: normal!important;
      text-transform: none!important;
      speak: none;
      line-height: 1;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale
    }

    i {
      position: relative;
      cursor: pointer
    }

    .icon-home:before {
      content: "\69"
    }

    .icon-arrow-down:before {
      position: absolute;
      top: 4px;
      right: -24px;
      content: "\6a"
    }

    header {
      min-height: 100px;
      border-bottom: 1px solid #d6dfeb
    }

    header .logo_pageindex {
      width: 28%;
      float: left;
      margin-top: 30px
    }

    header .logo_pageindex .logo {
      display: inline-block;
      float: left
    }

    header .logo_pageindex .logo a {
     ...

JavaScript

var list = document.querySelector('.option_list');
if (list.addEventListener) {
	list.addEventListener('mouseover', function() {
		var hiddenList = document.querySelector('.hidden_list')
		if (hiddenList.style.display = 'none') {
			hiddenList.style.display = 'block';
		};
	});
	list.addEventListener('mouseout', function() {
		var hiddenList = document.querySelector('.hidden_list')
		if (hiddenList.style.display = 'block') {
			hiddenList.style.display = 'none';
		};
	});
} else {
	list.attachEvent('onmouseover', function() {
		var hiddenList = document.querySelector('.hidden_list')
		if (hiddenList.style.display = 'none') {
			hiddenList.style.display = 'block';
		};
	});
	list.attachEvent('onmouseout', function() {
		var hiddenList = document.querySelector('.hidden_list')
		if (hiddenList.style.display = 'none') {
			hiddenList.style.display = 'block';
		};
	})
}