如何在不丢失部分菜单的情况下制作顶级菜单

Question

我最近正在开发我的网页设计，我试图在没有javascript的情况下尽可能多地使用css。当我制作导航菜单时出现了问题，该菜单应该保持在顶部。这是我的代码副本：

ul {
	background: rgba(37,39,44,.80);
	list-style-type:none;
	margin : 0;
	padding: 0;
	overflow:visible;
	font-family:Kreon;
	min-width:1349px;
	width:100%;
	top:0;
	position:fixed;
	border-bottom: 5px solid #22A85B;
	
}
li {
	float : right;
}
li a{
	display:block;
	color : white;
	text-align:center;
	padding: 15px 20px 15px 20px;
	text-decoration :none;
	border-right:0.5px solid #22a85b;
	transition: 0.3s all;
}
li a:hover {
	background:#22a85b;
}
.dropdown-arrow {
	position:relative;
	top:1px;
	display:inline-block;
	width:0;
	height:0;
	margin-left:5px;
	border: 4px solid transparent;
	border-top-color:#fff;
}
.dropdown {
	float:right;
	position:relative;
	display:inline-block;
	color: white;
	text-align:center;
	padding: 15px 20px 15px 20px;
	cursor:pointer;
	border-right:1px solid #22A85B;
}
.dropdown:hover{
	background:#22a85b;
}
.dropdown:focus {
	pointer-events:none;
	background:#eee;
	color:#000;
}
.dropdown-content {
	position:absolute;
	background-color:#eee;
	min-width:150px;
	z-index:1;
	opacity:0;
	visibility:hidden;
	transition: 0.2s linear;
	margin-top:36px;
	margin-left:-50px;
	border : 1px solid #bbb;
	border-top:none;
}
.dropdown-content a{
	text-align:right;
	color: black;
	font-family:kreon;
	text-decoration:none;
	padding: 10px 15px 10px 15px;
	display:block;
	transition: 0.1s linear;
	border-bottom: 1px solid #20D23F;
}
.dropdown-content a:hover{
	background: #22a85b;
	color:#fff;
}
.dropdown:focus .dropdown-content{
	opacity:1;
	visibility:visible;
	pointer-events:auto;
}
.dropdown:focus .dropdown-arrow{
	border: 4px solid transparent;
	border-bottom-color:#000;
	margin-bottom : 4px;
}

<ul>
<li style ="float:left; margin-left:150px; border-left:1px solid #22A85B;"><a href="#">Logo Here</a></li>
<li style="margin-right:60px;"><a href="#">About Us</a></li>
<li><a href="#">Hire Us!</a></li>
<div tabindex="0" class="dropdown">
<li class="fol">Follow Us <span class="dropdown-arrow"></span></li>
	<div class="dropdown-content">
	<a href="http://twitter.com">Twitter</a>
	<a href="http://fb.com">Facebook</a>
	<a href="http://pinterest.com" style="border-bottom:none; border-bottom-radius:0.3cm;">Pinterest</a>
	</div>
</div>
<li><a href="#">Be Our Designer!</a></li>
<li><a href="#">Portfolio</a></li>
<li style="border-left:1px solid #22A85B;"><a href="#">How Do We Work</a></li>
</ul>

因此，为了使菜单保持在顶部，我在CSS上添加了position : fixed;。但当我调整浏览器的大小时，浮动菜单会移动到某些菜单的底部。然后，我尝试设置min-width，却发现由于position : fixed，当我调整浏览器大小时（即使向左滚动也看不到），我的一些菜单丢失了。

如果有你们的帮助，我们将不胜感激。谢谢

Answer 1

调整浏览器大小时，我无法重现所描述的问题

编辑：我想我现在明白你的意思了（当你减少屏幕宽度时，菜单中的换行符）。你不能改变这一点，只有当你像Bootstrap那样改变较小屏幕大小栏上的菜单时（见下面的例子）

请参阅https://jsfiddle.net/bdtbz74f/（篡改代码）

我还添加了

body {
  margin-top: 60px;
}
ul {
  width:100%;
  top:0;
  left:0;
  right:0;
  position:fixed;   
}

并移除CCD_ 4。body上的margin-top可防止内容隐藏在导航栏后面。

提示：查看Bootstraps Fixed Top Navbar示例的CSS代码