Recursive Top Nav Inner Menus

crazy.html

<nav>
		<menu>
			<menuitem><a>Home</a></menuitem>
			<menuitem>
				<a>More</a>
				<menu>
					<menuitem>
						<a>Even More</a>
						<menu>
							<menuitem>
								<a>Wow that is deep</a>
								<menu>
									<menuitem><a>deep 1</a></menuitem>
									<menuitem>
										<a>deep 2</a>
										<menu>
											<menuitem><a>deep 1</a></menuitem>
											<menuitem><a>deep 1</a></menuitem>
											<menuitem>
												<a>super deep</a>
												<menu>
													<menuitem>
														<a>Not deep enough</a>
														<menu>
															<menuitem><a>deep 1</a></menuitem>
															<menuitem>
																<a>end of the line</a>
																<menu>
																	<menuitem><a>deep 1</a></menuitem>
																	<menuitem>
																		<a>I lied</a>
																		<menu>
																			<menuitem>
																				<a>Wow that is deep</a>
																				<menu>
																					<menuitem><a>deep 1</a></menuitem>
																					<menuitem>
																						<a>deep 2</a>
																						<menu>
																							<menuitem><a>deep 1</a></menuitem>
																							<menuitem><a>deep 1</a></menuitem>
																							<menuitem>
																								<a>super deep</a>
																								<menu>
																									<menuitem>
																										<a>Not deep enough</a>
																										<menu>
																											<menuitem><a>deep 1</a></menuitem>
																											<menuitem>
																												<a>end of the line</a>
																												<menu>
																													<menuitem><a>deep 1</a></menuitem>
																													<menuitem>
																														<a>Seriously this time</a>
																													</menuitem>
																												</menu>
																											</menuitem>
																										</menu>
																									</menuitem>
																								</menu>
																							<menuitem>
																						</menu>
																					</menuitem>
																				</menu>
																			</menuitem>
																			<menuitem><a>Test</a></menuitem>
																		</menu>
																	</menuitem>
																</menu>
															</menuitem>
														</menu>
													</menuitem>
												</menu>
											<menuitem>
										</menu>
									</menuitem>
								</menu>
							</menuitem>
							<menuitem><a>Test</a></menuitem>
						</menu>
					</menuitem>
					<menuitem><a>about</a></menuitem>
					<menuitem><a>help</a></menuitem>
				</menu>
			</menuitem>
		</menu>
	</nav>

style.css

body * {
		margin:0;
		padding:0;
	}

	nav > menu menuitem a {
		white-space:nowrap;
		display:block;
	}

	nav > menu {
		border:1px solid red;
	}

	nav menu > menuitem {
		display:inline-block;
		position:relative;
		background:#FFF;
	}

	nav menu menuitem:hover > a {
		cursor:pointer;
		background:#333;
		color:#FFF;
	}

	nav > menu menuitem > menu {
		opacity:0;
	}

	nav > menu menuitem:hover > menu:first-of-type{
		opacity:1;
	}

	nav > menu menuitem > menu menuitem {
		display:block;
	}

	nav > menu menuitem > menu {
		border:1px solid blue;
		position:absolute;
		bottom:0px;
		left:0px;
		transform:translateY(100%);
	}

	nav > menu menuitem > menu menu {
		transform:translateX(100%);
		bottom:inherit;
		left:inherit;
    	right:0px;
		top:0px;
	}