JSFiddle - React, Tailwind, and code Playground

by Mike Kerney

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Mike Kerney COP4318 Page</title>
	<link rel="stylesheet" type="text/css" href="kerneystyle.css">
	<meta charset="utf-8">
	<script src="menu.js"></script>
  </head>
  <body>
<div class="header">
  <img...

CSS

body {background-color:black}
.boxed {
  border: 1px solid lightblue ;
  width:600px;
  margin:auto;
  background: lightblue;
} 
.header {  
display: block;
    margin-left: auto;
    margin-right: auto;
    width: 40% 
} 

.purposestyle {color:black}

#sddm
{	margin-left:33%;
	padding:0;
	z-index: 30;
  text-align: center; }

#sddm li
{	margin-left: auto;
	padding: 2px;
	list-style: none;
	float: left;
	font: bold 11px arial}

#sddm li a
{	display: block;
	margin: 0 1px 0 ;
	padding: 4px 10px;
	width: 65px;
	background: #5970B2;
	color: white;
	text-align: center;
	text-decoration: none}

#sddm li a:hover
{	background: #49A3FF}

#sddm div
{	position: absolute;
	visibility: hidden;
	margin: auto;
	padding: 0;
	background: #EAEBD8;
	border: 1px solid #5970B2}

	#sddm div a
	{	position: relative;
		display: block;
		margin: auto;
		padding: 5px 10px;
		width: auto;
		white-space: nowrap;
		text-align: center;
		text-decoration: none;
		background:  #EAEBD8;
		color: #2875DE;
		font: 11px arial}

	#sddm div a:hover
	{	background: #49A3FF;
		color: #FFF}

JavaScript

var timeout	= 500;
var closetimer	= 0;
var ddmenuitem	= 0;

// open hidden layer
function mopen(id)
{	
	// cancel close timer
	mcancelclosetime();

	// close old layer
	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

	// get new layer and show it
	ddmenuitem = document.getElementById(id);
	ddmenuitem.style.visibility = 'visible';

}
// close showed layer
function mclose()
{
	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}

// go close timer
function mclosetime()
{
	closetimer = window.setTimeout(mclose, timeout);
}

// cancel close timer
function mcancelclosetime()
{
	if(closetimer)
	{
		window.clearTimeout(closetimer);
		closetimer = null;
	}
}

// close layer when click-out
document.onclick = mclose;