我有这个布局，顶部有一个导航，然后是一个图像。英雄图像的上边距为负，以便导航工作中的透明度。
+----------------------------------------+
| a.logo Home Cat1 Cat2 Cat3 Cat4 Cat5 |
+----------------------------------------+
| |
| Huge hero image here |
| |
+----------------------------------------+
a.logo是网站的品牌，里面有一张图片。从hometo 的项目cat5（实际上那里有更多类别，但你明白了）在<ul>with inline-blocked<li>中。问题是，当屏幕调整大小时，被剪裁的<li>项目只会付诸东流（如图 2 所示）。我希望它只是被剪裁，如图 3 所示。
图二：
+----------------------------------+
| a.logo Home Cat1 Cat2 Cat3 Cat4 |
| Cat5 |
+----------------------------------+
| |
| Huge hero image here |
| |
+----------------------------------+
图 3：
+----------------------------------+
| a.logo Home Cat1 Cat2 Cat3 Cat4 |
+----------------------------------+
| |
| Huge hero image here |
| |
+----------------------------------+
这是一个半实际的代码（实际内容被保留）：
<div id="nameplate" class="container">
<div class="row">
<div id="nav" class="twelvecol last">
<a href="" class="logo"><img src="logo.png" alt="The Logo"></a></a>
<ul id="nav_ul">
<li><a href="">Cat 1</a></li>
<li><a href="">Cat 2</a></li>
<li><a href="">Cat 3</a></li>
<li><a href="">Cat 4</a></li>
<li>
<a href="">Cat 5</a>
<ul class="social-dropdown">
<li><a href="">Facebook</a></li>
<li><a href="">Twitter</a></li>
<li><a href="">YouTube</a></li>
<li><a href="">RSS Feed</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
CSS样式的东西：
.container#nameplate { margin: 0 auto; padding: 20px 0; position: relative; text-align: center; z-index: 3; }
.container#nameplate #nav .logo, .container#nameplate #nav > ul { display: inline; vertical-align: middle; }
.container#nameplate #nav .logo { display: inline-block; }
.container#nameplate #nav > ul { height: 32px; overflow: hidden; }
.container#nameplate #nav li { font: 300 1.25em 'Oswald', Helvetica, Arial, sans-serif; display: inline-block; line-height: 2.1em; list-style: none; margin-right: 5px; text-transform: uppercase; vertical-align: middle }
.container#nameplate #nav li a { color: #ccc; padding: 3px; }
.container#nameplate #nav li a:hover { color: #fbfbfb; text-decoration: none; }
.container#nameplate #nav ul.social-dropdown { position: absolute; }
.container#nameplate #nav ul.social-dropdown li { display: block; font-size: 80%; text-align: left; }
我已经尝试过overflow: hidden了，加上一个固定的高度 on div#nameplate，但它会切断预计将显示在最后<li>一项上的下拉菜单。
关于如何在不切断下拉菜单的情况下执行此响应式操作的任何想法？