调整窗口大小时，仅移动css菜单项1：1

Question

我有以下显示的css菜单，但我想知道我怎么能，当浏览器窗口变小而菜单项不合适时，我怎么能一个接一个地移动它们！到最后一个最右边的项目＆＃34;更多......＆＃34;所以他们在那里创建一个子菜单。请参阅以下图片，了解第一项＆＃34;第七项＆＃34;和＆＃34;第八＆＃34;被转移到＆＃34;更多......＆＃34;第二张图片显示当你将鼠标悬停在＆＃34;第七＆＃34;时应该发生什么，它应该显示原来的子菜单项。

我当前的代码:(相同的笔可以更轻松地调整大小：https://codepen.io/anon/pen/oZoMbK）

＆＃13;

＆＃13;

* {box-sizing:border-box;}
.nav{
	background-color:#d6336c;
  font-size:20px;
}
.nav ul{
    list-style: none;
}
.nav ul li{
	padding:2px 20px;
	float: left;
	position:relative;
	background: #1bc2a2;
    white-space: nowrap;
}
.nav ul li ul {
	display:none;
  position: absolute;
	background-color:orange;
  left: 0;
}
.nav ul li ul, .nav li li {
    min-width: 100%;
}
.nav ul li:hover > ul{
	display: block;
}
.nav ul ul ul{
	left:100%;
	top:0;
}

.nav a{
	color:#ffffff;
}
ul,li{
    margin:0;
    padding:0;
}

＆＃13;

	<div class="nav">
<ul>
	<li><a href="#">first</a></li>
	<li><a href="#">second</a>
	<ul>
		<li><a href="#">sub1 first</a></li>
		<li><a href="#">sub1 second</a>	
		<ul>
			<li><a href="#">sub2 first</a></li>
			<li><a href="#">sub2 second</a>
			<ul>
				<li><a href="#">sub3 first</a></li>
				<li><a href="#">sub3 second</a></li>
				<li><a href="#">sub3 third</a></li>
			</ul>
			</li>
		</ul>
		</li>
		<li><a href="#">sub2 third</a></li>
	</ul>
	</li>
	<li><a href="#">third</a>
		<ul>
			<li><a href="#">.</a>
			<li><a href="#">.</a>
			<li><a href="#">.</a>
		</ul>
	</li>
	<li><a href="#">fourth</a></li>
	<li><a href="#">fifth</a></li>
	<li><a href="#">sixth</a></li>
	<li><a href="#">seventh</a>
	<ul>
		<li><a href="#">cats</a></li>
		<li><a href="#">dogs</a>
		<ul>
			<li><a href="#">beagle</a></li>
			<li><a href="#">boxer</a></li>
		</ul>        
		</li>
		<li><a href="#">birds</a></li>
	</ul>    
	</li>
	<li><a href="#">eighth</a></li>
	<li><a href="#">more...</a></li>
</ul>
</div>

＆＃13;

＆＃13;

＆＃13;

悬停时的第一张图片＆＃34;更多......＆＃34;：

第二张图片，当悬停＆＃34;第七张＆＃34;在＆＃34;更多...＆＃34;：

我无法弄清楚它是如何完成的，只有媒体查询，但我不想设置特定的值，因为菜单项宽度可能会改变/是动态的。以下两个笔以某种方式逐个移动项目，因为它们在调整屏幕大小时不适合：

https://codepen.io/VPenkov/pen/wMZBOg＆amp; https://codepen.io/tejasukmana/pen/bZKNrJ

我真的只想保留这个css，没有javascript。

提前感谢您的帮助！

谢