如何在不丢失部分菜单的情况下停留在顶级菜单上答案

【问题标题】：How to make a staying on top menu without losing parts of the menu如何在不丢失部分菜单的情况下停留在顶级菜单上
【发布时间】：2016-08-06 10:47:58
【问题描述】：

我最近正在开发我的网页设计，我尝试在没有 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>

所以为了让菜单保持在顶部，我将position : fixed; 放在我的 CSS 上。但是当我调整浏览器的大小时，浮动菜单会移动到某个菜单的底部。然后我尝试设置min-width，结果发现当我调整浏览器大小时我的一些菜单丢失了（即使我向左滚动也看不到它），因为position : fixed。

你们的任何帮助将不胜感激。谢谢！

【问题讨论】：

标签： html css menu navigation fixed

【解决方案1】：

~~在调整浏览器大小时无法重现所描述的问题。~~

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

见https://jsfiddle.net/bdtbz74f/（你的代码小提琴）

我也加了

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

并删除min-width。 body 上的 margin-top 可防止内容隐藏在导航栏后面。

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

【讨论】：