Как правильно поставить превдокласс

* { 
  box-sizing: border-box; 
  margin:0; 
  padding:0;   
} 
.q1{ 
	position:absolute; 
	width:100%; 
	top:0;left:0; 
	overflow:hidden; 
	padding-left:15%; 
} 
.q1>li{ 
	display:inline-block; 
	position:relative; 
	vertical-align:top; 
	z-index:1000; 
	height:42px; 
	transition:all 1s; 
	width:17%; 
} 
.q1>li img{ 
	position:absolute; 
	top:5px; 
	left:5px; 
	transition:all .3s; 
} 
.q1>li>a{ 
	display:inline-block; 
	text-decoration:none; 
	padding:12px 0px; 
	width:100%; 
	text-align:center; 
	background:#FF6633; 
} 
.q2{ 
	position:absolute; 
	top:-90px; 
	left:0;	 
	width:100%; 
	transition:all 1s; 
	z-index:-1; 
} 
.q2>li{ 
	display:block;	 
	position:relative; 
	width:100%; 
	z-index:1000; 
	margin-bottom:3px; 
	transition:all .1s; 
	float:left; 
} 
.q2>li> a{ 
	display:inline-block; 
	padding:12px 0px; 
	width:100%; 
	text-align:center; 
	background:#336699; 
} 
.q1>li:hover .q2{ 
	top:45px; 
} 
.q1>li:hover img{ 
	transform:rotate(90deg); 
} 
.q1>li:hover{ 
	height:360px; 
} 
nav{ 
	position:relative; 
	height:48px; 
	margin:50px 0 0 0px; 
} 
.q2>li>a.q4{ 
	position:absolute; 
	top:0; left:0; 
	background:blue; 
	transition:all 1s; 
	z-index:-1; 
} 
.q2>li:hover{ 
		margin-left:5px; 
} 
.q2>li:hover a.q4{ 
		left:101.5%; 
} 
.q1 li:first-child .q2 .q4{ 
	right:0; 
	left:auto; 
} 
.q1 li:first-child .q2 li:hover .q4{ 
		right:101.5%; 
} 
.q1 li:first-child ul:not(.q77) li:hover{ 
	float:right; 
	margin-left:0; 
	margin-right:3px; 
} 
.q2>li>.vid{ 
	display:block; 
	position:absolute; 
	right:0;top:0; 
	height:100%; 
	width:100%; 
	transition:all 1s; 
	z-index:-1; 
} 
.q2>li .vid .q44{ 
	display:inline-block; 
	right:0;top:0; 
	width:100%; 
	padding:12px 0; 
	background:green; 
	transition:all 1s; 
} 
.q2>li .vid .q33{ 
	display:inline-block; 
	position:absolute; 
	right:0; 
	top:0; 
	width:100%; 
	height:100%; 
	background:black; 
	transition:all 1s; 
	z-index:-1; 
} 
.q2>li:hover .vid{ 
	right:101.5%; 
} 
.q2>li .vid:hover .q33{ 
	top:108%; 
} 
.q2>li>.vid .yu{ 
	display:block; 
	position:absolute; 
	right:0;top:0; 
	height:100%; 
	width:100%; 
	transition:all 1s; 
	z-index:-1; 
	overflow:hidden; 
	transition:all 1s; 
} 
.q2>li>.vid .yu:hover{ 
	height:180px; 
} 
.q2>li>.vid .yu .q55{ 
	display:inline-block; 
	padding:12px 0px; 
	width:100%; 
	text-align:center; 
	background:black; 
	z-index:-2; 
} 
.q2>li .vid:hover .yu{ 
	top:108%; 
} 
.q77{ 
	position:absolute; 
	top:-90px; 
	left:0;	 
	width:100%; 
	z-index:-3; 
	transition:all 1s; 
} 
.q77 li{ 
	display:block; 
	width:50%; 
	margin:0 auto; 
	margin-bottom:3px; 
} 
.q77 li a{ 
	display:inline-block; 
	padding:12px 0px; 
	width:100%; 
	text-align:center; 
	background:#336699; 
} 
.yu:hover .q77{ 
	top:45px; 
}

 <nav> 
 <ul class="q1"> 
 <li> 
	<a href="#">123<img src="line.png" width="30px" height="30px"></a> 
		<ul class="q2"> 
		<li><a href="#">333</a><div class="vid"><a href="#" class="q44">124</a><a href="#" class="q33">OoO</a></div></li> 
		<li><a href="#">333</a><a href="#" class="q4">123</a></li> 
		<li><a href="#">333</a><div class="vid"><a href="#" class="q44">124</a><div class="yu"><a href="#" class="q55">OoO</a><ul class="q77"> 
				<li><a href="#">333</a></li> 
				<li><a href="#">333</a></li> 
				<li><a href="#">333</a></li> 
				</ul></div></div></li> 
		</ul> 
</li> 
 <li> 
	<a href="#">123</a> 
		<ul class="q2"> 
		<li><a href="#">333</a><a href="#" class="q4">123</a></li> 
		<li><a href="#">333</a><a href="#" class="q4">123</a></li> 
		<li><a href="#">333</a><a href="#" class="q4">xaxaxa</a></li> 
		</ul> 
</li> 
</ul> 
</nav>