Question

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

＆＃13;

<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>

＆＃13;

position : fixed;

＆＃13;

为了使菜单保持最佳状态，我将min-width放在我的CSS上。但是当我调整浏览器大小时，浮动菜单会移动到某个菜单的底部。然后我尝试设置position : fixed只是为了发现当我调整浏览器大小时我的某些菜单丢失了（即使我向左滚动，也看不到它）由于{ {1}}。

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

Answer 1

~~调整浏览器大小时无法重现上述问题。~~

编辑：我想我现在明白你的意思了（缩小屏幕宽度时菜单中的换行符）。只有在像Bootstrap这样的较小屏幕尺寸条上更改菜单时，您才能更改它（参见下面的示例）

请参阅https://jsfiddle.net/bdtbz74f/（代码的小提琴）

我还添加了

0x40000

并删除body { margin-top: 60px; } ul { width:100%; top:0; left:0; right:0; position:fixed; }。 min-width上的margin-top会阻止内容隐藏在导航栏后面。

提示：看一下Bootstraps Fixed Top Navbar Example的

的CSS代码

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

1 个答案: