Skyrim-Inspired Drop Down Menu

HTML

<ul id="skyrimmenu">
	<li>
		<a href="#">Parent 1</a>
		<ul>
			<li>
				<a href="#">Child A</a>
			</li>
			<li>
				<a href="#">Child B</a>
			</li>
			<li>
				<a href="#">Child C</a>
			</li>
		</ul>
	<li>
	<li>
		<a href="#">Parent 2</a>
		<ul>
			<li>
				<a href="#">Child D</a>
			</li>
			<li>
				<a href="#">Child E</a>
			</li>
			<li>
				<a href="#">Child F</a>
			</li>
			<li>
				<a href="#">Child G</a>
			</li>
		</ul>
	<li>
	<li>
		<a href="#">Parent 3</a>
		<ul>
			<li>
				<a href="#">Child H</a>
			</li>
			<li>
				<a href="#">Child I</a>
			</li>
			<li>
				<a href="#">Child J</a>
			</li>
			<li>
				<a href="#">Child K</a>
			</li>
			<li>
				<a href="#">Child L</a>
			</li>
		</ul>
	<li>
	<li>
		<a href="#">Parent 4</a>
		<ul>
			<li>
				<a href="#">Child M</a>
			</li>
			<li>
				<a href="#">Child N</a>
			</li>
			<li>
				<a href="#">Child O</a>
			</li>
			<li>
				<a href="#">Child P</a>
			</li>
			<li>
				<a href="#">Child Q</a>
			</li>
			<li>
				<a href="#">Child R</a>
			</li>
		</ul>
	<li>
</ul>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);

#example {
	background: #333 url(http://subtlepatterns.com/patterns/tex2res4.png) 0 0 repeat;
	min-height: 100%;
	height: 100%;
	font-family: "Open Sans", sans-serif;
	font-weight: 300;
}

#example a {
	color: rgba(255, 255, 255, 0.6);
	text-decoration: none;
}

	a:hover, li:hover > a {
		color: #FFF;
	}

#example ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#example li {
	margin: 0;
	padding: 0;
}

#skyrimmenu {
	border-left: 1px solid #FFF;
	border-right: 1px solid #FFF;
	background: rgba(0, 0, 0, 0.5);
	float: left;
	font-size: 1.5em;
	min-height: 100%;
	margin-left: 1em;
	color: #FFF;
	min-height: 800px;
}

#skyrimmenu li {
	position: relative;
	z-index: 1;
}

#skyrimmenu li a {
	display: block;
	padding: 0.5em 1em;
	white-space: nowrap;
}

	#skyrimmenu li ul {
		position: absolute;
		overflow: hidden;
		display: none;
		left: 100%;
		top: 0.5em;
		float: none;
		background-image: -moz-radial-gradient(0 50%, ellipse  farthest-side, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.5) 33%, rgba(0,0,0,0) 100%);
		background-image: -webkit-radial-gradient(0 50%, ellipse  farthest-side, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.5) 33%, rgba(0,0,0,0) 100%);
		background-image: radial-gradient(0 50%, ellipse  farthest-side, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.5) 33%, rgba(0,0,0,0) 100%);
	}
	
	#skyrimmenu li:hover ul {
		display: block;
	}
	
	#skyrimmenu li ul a {
		position: relative;
		font-size: 0.8em;
	}
	
	#skyrimmenu li ul a:hover:before {
		content: "";
		display: block;
		width: 1em;
		height: 1em;
		background: rgba(0,0,0,0.75);
		border: 1px solid #FFF;
		position: absolute;
		top: 0.5em;
		left: -0.75em;
		-moz-transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}