我使用Foundation 6创建了一个顶栏菜单，查看其文档和页面上的一些教程。我设法使其成功响应，在移动视图中从下拉列表更改为向下钻取。一切都好，但我在这里遗漏了一些东西。下拉框不会展开以使菜单选项各占一行。基础课程＆＃34; is-dropdown-submenu＆＃34;设置最小宽度为200px。但这并不是最小宽度。它作为最大宽度工作，因为下拉框不会超出该值。我必须手动设置一个更大的宽度，将所有菜单选项分别放在一行中。有没有办法让下拉框自动调整其大小？ 有什么想法吗？
<div class="top-bar">
<div class="wrapper">
<div class="top-bar-title">
<span data-responsive-toggle="responsive-menu" data-hide-for="medium">
<button class="menu-icon" type="button" data-toggle></button>
</span>
<img class="logo" src="https://placehold.it/145x40&text=LOGO">
</div>
<div id="responsive-menu">
<div class="top-bar-left">
<ul class="vertical medium-horizontal menu navigation" data-responsive-menu="drilldown medium-dropdown"
data-back-button='<li class="js-drilldown-back"><a tabindex="0">Return</a></li>'>
<li>
<a href="#">Lorem Ipsum</a>
<ul class="vertical menu">
<li><a href="#">Lorem Ipsum</a></li>
<li><a href="#">Lorem Ipsum</a></li>
<li><a href="#">Lorem Ipsum</a></li>
<li><a href="#">Lorem Ipsum Dolor Sit Amet</a></li>
<li><a href="#">Lorem Ipsum Dolor Sit Amet</a></li>
</ul>
</li>
<li>
<a href="#">Lorem</a>
<ul class="vertical menu">
<li><a href="#">Ipsum</a></li>
<li><a href="#">Lorem Ipsum Dolor Sit Amet</a></li>
<li><a href="#">Lorem Ipsum Dolor</a></li>
</ul>
</li>
<li><a href="#">Lorem Ipsum Dolor Sit Amet</a></li>
<li><a href="#">Lorem</a></li>
</ul>
</div>
</div>
</div>
</div>
这是我的codepen