JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu" onMouseOver='menuShow();' onMouseOut='menuHide();'>
<span id="menuText">МЕНЮ</span>
<ul id="menu" onClick='menuHide();'>
	<li><a href="#JS_sprav">Справочник по JavaScript</a>
		<ul>
			<li><a href="#stand_comp">Стандарты и совместимость</a></li>
			<li><a href="#object_model">Объектная модель JavaScript</a></li>
			<li><a href="#model_event">Модели событий JavaScript</a></li>
		</ul>
	</li>
</ul>
</div>

CSS

/***[ main.css ]***/
body {
	background-color: black;
	scrollbar-arrow-color: #269CF7;
	scrollbar-base-color: #269CF7;
	scrollbar-3dlight-color: #269CF7;
	scrollbar-face-color: #269CF7;
	scrollbar-arrow-color: lime;
	scrollbar-track-color: #383838;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 10pt;
	color: #34FAB0;
}

.text {font-size: 10pt; color: #34FAB0}

a {font-size: 10pt; color: #04FF63}
a:hover, a:active {color: #FF1538}

.h1, .h2, .h3, .h4, .h6 {color: #269CF7}
.h5 {color: red}
.h1, .h2, .h3, .h4 {text-align: center}
.h5, .h6 {text-align: left}

.h1 {
	font-size: 32pt;
	filter: Blur(Add=1, Direction=135, Strength=5);
	font-weight: bold
}

.h2 {
	font-size: 25pt;
	filter: Blur(Add=1, Direction=135, Strength=4)
}

.h3 {
	font-size: 20pt;
	filter: Blur(Add=0, Direction=135, Strength=3);
	background: #330066;
	border: 3px dashed #269CF7
}

.h4 {
	font-size: 15pt;
	filter: Blur(Add=0, Direction=135, Strength=2)
}

.h5 {
	font-size: 12pt;
	font-weight: bold;
	text-indent: 12pt;
	filter: Blur(Add=0, Direction=135, Strength=1)
}

.h6 {
	text-transform: none;
	text-decoration: underline;
	text-indent: 6pt
}

.copyright {
	font-size: 10px;
	color: yellow;
	text-decoration: none;
	font-style: italic;
}

.btext {font-size: 10pt; color: #34FAB0; font-weight: bold}
.ctext {font: normal 10pt "Courier New", Courier, mono; color: #94FAF0}
.h6_th {
	font-size: 10pt;
	text-transform: none;
	color: #269CF7;
	text-decoration: underline;
	text-align: center
}
.h5centered {
	font-size: 12pt;
	text-align: center;
	color: #269CF7;
	filter: Blur(Add=0, Direction=135, Strength=1);
	font-weight: bold
}
hr {color: yellow}
acronym {margin: 0em 0.6em}
legend {color: aqua}
/***[ menu.css]***/
#menuText {
	color: red;
	font: bold 1.4em sans-serif
}
.menu {
	width: 80px;
	padding: 10px;
	position: absolute;
	left: 0;
	top: 0;
	font: 0.8em Arial, Verdana, sans-serif;
	text-align: center;
	background: maroon;
	border: 1px solid #FFCC00
}
/*body>.menu {position:...

JavaScript

var menuObj = {};
function menuShow() {menuObj.menu.style.display = "block";}
function menuHide() {menuObj.menu.style.display = "none";}

/*** Для добавления правил в таблицу стилей ***/
function changeStyle(css, ssNum) {
var styleObj = document.getElementsByTagName('STYLE')[0];
	if (!styleObj) {	// если нет тэга STYLE в документе
		styleObj = document.createElement('STYLE');
		styleObj.type = 'text/css';
		document.getElementsByTagName('HEAD')[0].appendChild(styleObj);
	}
	if (document.styleSheets) {
		if (document.styleSheets[ssNum].addRule) {	// for IE
			var sList = css.split('\n');
			for (var i = 0; i < sList.length; i++) {
				var selector = sList[i].substr(0, sList[i].search(/\s\{/));
				var rule = (
					sList[i].substring( sList[i].indexOf('{')+1, sList[i].lastIndexOf('}') )
				).replace(/[\t\r\n]/g, '');
				document.styleSheets[ssNum].addRule(selector, rule);
			}
		}
		else if (document.styleSheets[ssNum].insertRule) {	// for FF
			document.styleSheets[ssNum].insertRule(css, document.styleSheets[ssNum].cssRules.length);
		}
	}
	else if (!window.opera) {	// for NOT Opera
		var rule = document.createTextNode(css);
		styleObj.appendChild(rule);
	}
}
onload = function () {
//==[ Fix stylesheets ]=========================================================
// Fix UL margin-left в FF в добавление border-collapse во всех браузерах, кроме Оперы
var cssFF = 'ul {margin-left: -20px}\n';
var css =
	'table {table-layout: fixed; border-collapse: collapse}';
	//'td {border: 3px double #269CF7}';
	if (document.body.textContent) {	// if FF
		changeStyle(cssFF+css, 1);
	} else {
		changeStyle(css, 1);
	}
//==[ Add event to menu ]=======================================================
menuObj.menu = document.getElementById("menu");
	for (var i = 0; i < menuObj.menu.childNodes.length; i++) {
		var curNode = menuObj.menu.childNodes[i];
		if (curNode.nodeName == "LI") {
			curNode.onmouseover = function () {this.className = "enter";}
			curNode.onmouseout = function ()...