Webpage Menu CSS only

/**********************************/
/* ##> black **********************/
nav, nav ul, .menu, footer
{
	color: white;
	background-color: black
}

/**********************************/
/* ##> white **********************/
nav li:focus,
nav li:hover,
.menu:hover
{
	color: black;
	background-color: white
}

/**********************************/
/* ##> fixed **********************/
nav, footer
{
	z-index: 2
}

/**********************************/
/* ==> BODY ***********************/
html{box-sizing:border-box}
*,*:before,*:after{box-sizing:inherit}
html,body{font-family:Verdana,sans-serif;line-height:1.5}
/*
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{margin:0}
html{overflow-x:hidden}
*/
body
{
	margin: 0rem 0rem 0rem 0rem;        /* abstand rahmen zum eltern object */
	padding: 0rem 0rem 0rem 0rem;       /* abstand zum rahmen */
	z-index: 1;

}

a
{
	color: inherit
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a
{
	text-decoration: none;
}

/**********************************/
/* ==> MENU ***********************/
.menu
{
	position: fixed;
	top: 0;
	right: 0;
	/*width: 20%;*/

	float: right;

	z-index: 3;

	text-align: right;

	white-space: nowrap;

	margin: 0rem 0rem 0rem 0rem;             /* abstand rahmen zum eltern object */
	padding: 0.4rem 0.8rem 0.4rem 0.8rem;    /* abstand zum rahmen */


	text-decoration: none;

	font-size: 1rem;

	cursor: pointer;
}

input.menu[type=checkbox]
{
	display: none;
}

input.menu[type=checkbox]:checked ~ nav
{
	display: none;
}

input.menu[type=checkbox]:not(:checked) ~ nav
{
	display: initial;
}

@media screen and (max-width: 600px)
{
	nav
	{
		display: none;
	}
}

/*
input.menu[type=checkbox]:checked + label.menu
{
	position: absolute;
	display: block;
	visibility: visible
}
*/

label.menu
{
	/*padding: 0.4rem 0.4rem 0.4rem 0.4rem;     abstand zum rahmen */
	/*transform:rotate(90deg);*/
}

/**********************************/
/* ==> NAV ************************/
nav
{
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	font-size: 1rem
}

/* ==> NAV Level all **************/
nav ul
{
	position: absolute;
	left: 0;
	width: 100vw;

	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: flex-start;

	overflow: display;
	margin: 0rem 0rem 0rem 0rem;        /* abstand rahmen zum eltern object */
	padding: 0rem 2.6rem 0rem 0rem;   /* abstand zum rahmen */
	list-style-type: none
}

nav li
{
	float: left;
	overflow: display;
	margin:  0rem 0rem 0rem 0rem;       /* abstand rahmen zum eltern object */
	padding: 0.4rem 0rem 0.4rem 0rem;   /* abstand zum rahmen */
	color: inherit;
	background-color: inherit;

}

nav li:last-child
{
	float: clear
}

nav li:focus,
nav li:hover
{

}

nav a
{
	display: inline;
	white-space: nowrap;

	margin: 0rem 0rem 0rem 0rem;         /* abstand rahmen zum eltern object */
	padding: 0rem 0.8rem 0rem 0.8rem;    /* abstand zum rahmen */

	text-decoration: none
}

/* ==> NAV Level first ************/
nav > ul
{

}

nav > ul > li
{

}

nav > ul > li:first-child
{
	/* abstand zum rahmen */
	/*
	padding: 0.1rem 0rem 0.1rem 0rem;
	font-weight: bolder;
	font-size: 1rem;
	*/
	border-left: none
}

nav > ul > li:first-child a
{
	/*padding: 0rem 0.1rem 0rem 0.1rem;     abstand zum rahmen */
}

nav > ul > li:last-child
{
	border-right: none
}

/* ==> NAV Level next *************/
nav li > ul
{
	/* position: absolute; == nav ul */
	display: none;
	visibility: hidden;
	opacity: 0;
	border-style: solid;
	border-width: 1px 0px 1px 0px;
	border-color: white;
	margin: 0.4rem 0px 0rem 0px;    /* abstand rahmen zum eltern object 2.6*/
	padding: 0rem 2.6rem 0rem 2.6rem;   /* abstand zum rahmen */
	z-index: 0;
	min-height: calc(100% - 2.6rem);
}

nav ul:hover > li > ul
{
	display: flex;
	transition: visibility 1s linear 0s, opacity 0.8s ease-in 0.2s;
}

nav ul > li:focus > ul,
nav ul > li:hover > ul
{
	display: flex;
	visibility: visible;
	opacity: 1;
	transition: visibility 0s linear 0s, opacity 0s linear 0s;
	z-index: 2;
}

nav li > ul:hover
{
/*
	opacity: 1;
	background-color: green;



	transition: all 3s;

	transition-delay: display 2s, visibility 2s;
	transition:all 3s;
	*/
}

nav li > ul li
{
	border-style: solid;
	border-width: 2px 0px 0px 0px;
	border-color: black;
	min-height: calc(100% - 2.6rem);
}

/**********************************/
/* ==> CONTENT ********************/

/* ==> CONTENT first sibbling *****/
nav + *
{
	margin-top: 0rem;         /* abstand rahmen zum eltern object */
	padding-top: 4.2rem;      /* abstand zum rahmen */
}

/* ==> CONTENT all sibblings ******/
nav ~ *
{
	padding-left: calc((100% - 40rem) / 2);     /* abstand zum rahmen */
	padding-right: calc((100% - 40rem) / 2);    /* abstand zum rahmen */
	z-index: inherit;
}

@media screen and (max-width: 600px)
{
	nav ~ *
	{
		padding-left: 0.4rem;     /* abstand zum rahmen */
		padding-right: 0.4rem;    /* abstand zum rahmen */
	}
}

/**********************************/
/* ==> FOOTER *********************/
footer
{
	position: static;
	width: 100%;
	/*bottom: 0;*/

	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: stretch;

	margin: 4rem 0rem 0rem 0rem;
	font-size: 0.66rem;
}

footer > *
{
	border-style: solid;
	border-width: 0px 0px 0px 1px;
	border-color: white;

	padding-left: 1rem;
	margin-top: 1rem;
	margin-bottom: 1rem;
}

footer > *:first-child
{
	border-left: none
}

footer > *:last-child
{
	border-right: none
}