dropdown with an after for maintaining the hover when you mouse around

dabblet.css

/* dropdown with an after for maintaining the hover when you mouse around */

ul
{
	display: none
}

nav:hover ul
{
	position: relative;
	display: block;
	outline: 1px solid blue;
}

nav:hover ul::before
{
	outline: 1px solid red;
	display: block;
	position: absolute;
	content:"";
	top: 0;
	left: 0;
	width: 300%;
	height: 300%;
	margin-left: -100%;
	margin-top: -100%;
}

dabblet.html

<nav>
	Dropdown
	<ul>
		<li>item</li>
	</ul>
</nav>

settings.json

{"view":"split","seethrough":"","prefixfree":"1","page":"all"}