CSS-only menu, responsive and accesible

responsiveMenu.css

<!--
css only responsive menu (3 or more levels)
uses flexbox, tested in chrome, firefox, IE11, Safari 7+

Key tips:
- position:  nav:relative, ul:absolute
- elements: <li><p> to define any element, link or not, not only <li>. The <p> is what gets borders and colors
- mobile button: checkbox on/off
			other dropdown may be check boxs as well, as plain hover can cause trouble
-->

<style>
	/* wrapper */
	nav {
		position:relative;		/* not needed, but to play with the absolute of ul */
	}

	/* main ul container */
	nav > ul {
		position: absolute;									/* important to unfold over the text */
		width:100%;													/* important to allow positionin inner elements */
		display:flex;
			display:-webkit-flex; 							/* safari */
		flex-direction:row;									/* first row horizontal by default*/
		justify-content: center;						/* optional position */
			-webkit-justify-content: center;		/* safari */
	}

	/* fix list style*/
	nav li {
		list-style : none;
		
		/* overflow: hidden */
	}
	
	/* fix link style */
	nav a, nav a:visited {		
		text-decoration : none;
		display:block;			/* make link ocupy whole <p> */
		color: inherit;
	}

	/* base menu element */
	nav li p {
		width : 220px;
		height: 35px;		
		text-align : left;
		margin:0px;
		padding:0px 0px 0px 10px;

		border: 1px solid grey;			
		background-color : #eee; /* light */
		color: black;
		box-shadow: 2px 4px 10px #aaa;
	}
	
	/* menu first level */
	nav > ul>li > p {
		padding-left: 10px;
		background-color: #ccc; /* dark */
	}

	/* menu second level  */
	nav >  ul>li > ul>li > p  {
			padding-left: 20px;
	}
	
	/* menu third level */
	nav >  ul>li > ul>li > ul>li > p  {
			padding-left: 35px;
			font-style: italic;
	}	
	
	/* add > to inner dropdowns */	
	nav > ul>li .menu-dropdown > p:after {
		content: " > ";
	}
	
	/* selectable p mouseover */
	nav li:not(.menu-dropdown):hover p {
		background-color: yellow;
	}
	
	/* selectable p selected  */
	nav li:not(.menu-dropdown):active p {
		background-color: lightgreen !important;
	}
	
	/* ------------------------ VISIBILITY CONTROL */
	li.menu-dropdown > ul {	
		height:0px; overflow:hidden;  		/* (1-off) dropdowns closed by default (instead of display:none for accessibility)*/
	}
	
	li.menu-dropdown:hover > ul {
		height:auto; overflow:visible;  	/* (1-on) make visible */
	}
	
	nav > label, nav > input {
		display:none;						 			/* (2-off) mobile Menu button, hidden by default */
																	/*   (no problem with display:none here, no linkes hidden to readers) */
	}
	
	/* MOBILE  */
	@media screen and (max-width : 768px) {
		nav > label {											
			display:block;							/* (2-on) show mobile Menu button */
		}	

		nav > ul {
			height:0px; overflow:hidden;		/* (3-off) menu items hidden on mobile until press Menu */
			flex-direction:column;
				-webkit-flex-direction:column;	/*safari*/
		}
		
		nav input:checked + ul {				
			height:auto; overflow:visible;	/* (3-on) show/hide menu on Menu press */
		}
		
		li.menu-dropdown > ul {
			height:auto; overflow:visible;						/* Optional: in mobile, show everything open by default. */
															/* If you prefer accordion style set this to 'height:0px; overflow:hidden;' */
															/*   but 'hover' opening may cause issues, not in mobile phones, but yes 
															/*   on small desktop browsers -try click action 1.3. */
															/*   To solve this dropdowns heading should be check boxes */
		}

	}
	
	/* Screen reader -normally wont work, but for the future. Fallback as display:none skiped for links */
	@media reader {
		li.menu-dropdown > ul {
			height:auto; overflow:visible;	/* open all menus */
		}
		
		nav > ul {
			position:relative;							/* dont float menu */
		}
	}
</style>



<nav>
		<!-- mobile button, uses checkbox on/off -->
		<label for="menu-button">MENU</label>
		<input id="menu-button" type="checkbox" />
		
		<!-- normal menu -->
		<ul aria-label="Main menu">
			<li>
				<p><a href="#home">Home</a></p>
			</li>
			
			<li class="menu-dropdown">
				<p>Dropdown 1</p>
				<ul>
					<li><p><a href="#">Action 1.1</a></p></li>
					
					<li class="menu-dropdown">
						<p>Dropdown 1.2</p>
						<ul>
							<li><p><a href="#">Action 1.2.1</a></p></li>
						</ul>
					</li>
					
					<li><p><a href="#">Action 1.3</a></p></li>
					
				</ul>
			</li>
			
			<li class="menu-dropdown">
				<p>Dropdown 2</p>
				<ul>
					<li><p><a href="#">Action 2.1</a></p></li>
					<li><p><a href="#">Action 2.2</a></p></li>
				</ul>
			</li>
			
		</ul>	
</nav>