body {
	margin:0;
	padding:0;
	height:100%;
}
a{
	text-decoration:none;
	color:blue;
	cursor:pointer;
}
.grid-container {
	display:grid;
	height:100vh;
	grid-template-areas:
	"header header header header header header"
	"menu main main main main main"
	"menu footer footer footer footer footer";
	grid-template-rows:80px 1fr 60px;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	gap:10px;
	background-color: #dfdfdf;
	padding:10px;
}
.grid-container > div {
	text-align:center;
	border-radius:6px;
	border: 1px solid black;
	background-color:white;
	padding:10px;
}
.item1 {grid-area:header;}
.item2 {grid-area:menu; }
.item3 {grid-area:main; }
.item5 {grid-area:footer;}

/* MENU STYLE */
.menu {
	background-color:#2c3e50;
	height:100%;
	padding:0;
	margin:0;
	border-radius:6px;
}
.menu ul{
	list-style:none;
	margin:0;
	padding:0;
}
.menu ul li a{
	display:block;
	color:white;
	padding:12px;
	text-decoration:none;
	text-align:left;
}

.menu ul li a:hover {
	background-color: #34495e;
}

.menu ul li .dropdown-content {
	display:none;
	position:absolute;
	left:100%;
	top:0;
	background-color:#34495e;
	min-width:160px;
	border-radius:0 6px 6px 0;
	z-index:1;
}

.menu ul li .dropdown-content li a {
	color:#fff;
	padding:10px;
	border-bottom:1px solid #2c3e50;
}

.menu ul li.dropdown:hover .dropdown-content {
	display:block;
}