test nav

by Fiddel

HTML

<nav id="mainnav">
	<ul>
		<li><a href="#">Link 1</a></li>
		<li><a href="#">Link 2</a>
			<ul>
				<li><a href="#">Link 2.1</a></li>
				<li><a href="#">Link 2.2</a></li>
			</ul>
		
		
		</li>
		<li><a href="#">Link 3</a></li>


	</ul>
	
	
	
</nav>

CSS

#mainnav ul {
	padding:0;
	list-style:none;	
	position:relative;
}
#mainnav li {
	display:inline-block;
	vertical-align:top;
}
#mainnav li a {
	display:block;
	padding:1em;
	background-color:yellow;
}

#mainnav li ul {
	position:absolute;
	bottom:-50px;
}
#mainnav li li a {
	display:block;
	padding:1em;
	background-color:orange;
	color:#fff;
}

JavaScript

document.addEventListener('DOMContentLoaded',function(){

// click #mainnav > ul --> toggle #mainnav ul ul

})