Pure CSS dropdown menu

dropdown.html

<nav class="main-menu">
	<ul>
		<li class="current-menu-item"><a href="#">Home</a></li>
		<li><a href="#">Menu 1</a>
			<ul>
				<li><a href="#">Sub Menu 1</a></li>
				<li><a href="#">Sub Menu 2</a></li>
				<li><a href="#">Sub Menu 3</a></li>
				<li><a href="#">Sub Menu 4</a>
					<ul>
						<li><a href="#">Deep Menu 1</a>
							<ul>
								<li><a href="#">Sub Deep 1</a></li>
								<li><a href="#">Sub Deep 2</a></li>
								<li><a href="#">Sub Deep 3</a></li>
								<li><a href="#">Sub Deep 4</a></li>
							</ul>
						</li>
						<li><a href="#">Deep Menu 2</a></li>
					</ul>
				</li>
				<li><a href="#">Sub Menu 5</a></li>
			</ul>
		</li>
		<li><a href="#">Menu 2</a>
			<ul>
				<li><a href="#">Sub Menu 1</a></li>
				<li><a href="#">Sub Menu 2</a></li>
				<li><a href="#">Sub Menu 3</a></li>
			</ul>
		</li>
		<li><a href="#">Menu 3</a>
			<ul>
				<li class="dir"><a href="#">Sub Menu 1</a></li>
				<li class="dir"><a href="#">Sub Menu 2 THIS IS SO LONG IT MIGHT CAUSE AN ISSEUE BUT MAYBE NOT?</a>
					<ul>
						<li><a href="#">Category 1</a></li>
						<li><a href="#">Category 2</a></li>
						<li><a href="#">Category 3</a></li>
						<li><a href="#">Category 4</a></li>
						<li><a href="#">Category 5</a></li>
					</ul>
				</li>
				<li><a href="#">Sub Menu 3</a></li>
				<li><a href="#">Sub Menu 4</a></li>
				<li><a href="#">Sub Menu 5</a></li>
			</ul>
		</li>
		<li><a href="#">Menu 4</a></li>
		<li><a href="#">Menu 5</a></li>
		<li><a href="#">Menu 6</a></li>
		<li><a href="#">Contact Us</a></li>
	</ul>
</nav>

style.css

.main-menu{}
.main-menu ul{
	list-style:none;
	position:relative;
	margin:0;
	padding:0
}
.main-menu ul li{
	position:relative;
	display: inline-block;
	margin:0;
	padding:0
}
.main-menu ul a{
	display:block;
	color:#333;
	text-decoration:none;
	line-height:32px;
	padding:0 15px;
	font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}
.main-menu ul li.current-menu-item{
	background:#ddd
}
.main-menu ul li:hover{
	background:#f6f6f6
}
.main-menu ul ul{
	display:none;
	position:absolute;
	top:100%;
	left:0;
	background:#fff;
	padding:0
}
.main-menu ul ul li{
	float:none;
	width:200px
}
.main-menu ul ul a{
	line-height:120%;
	padding:10px 15px
}
.main-menu ul ul ul{
	top:0;
	left:100%
}
.main-menu ul li:hover > ul{
	display:block
}