Zurb foundation 响应式网站下拉列表问题

我在基础5框架的下拉式中遇到了一个问题。 基本上，我给下拉菜单分配了一个输入字段和按钮，效果很好

但由于我不能像在第一个下拉列表中那样首先看到后退按钮，我看不出任何原因。当基本代码是复制时

查看第二个下拉列表并返回菜单查看下拉列表后，输入字段和按钮可见

源代码如下：

CSS:

。的形式很小{
顶部：0rem；
左：0rem；
最小宽度：15rem；}
@仅介质屏幕和（最大宽度：40em）{
.有形式{
最小宽度：10雷姆；
顶部：0 rem；}
.有表格.按钮{
高度：3rem；}}

HTML: 下拉列表1：

<section class='top-bar-section'>
  <!-- Right Nav Section -->
  <ul class='right'>
    <li><a href='#'>Button</a></li>
    <li class='has-dropdown'>
      <a href='#'>Dropdown</a>
      <ul class='dropdown'>
        <li><a href='#'>link</a></li>
        <li><a href='#'>link</a></li>
      </ul>
    </li>
  </ul>
</section>

下拉列表2：

    <section class='top-bar-section'>
      <!-- Right Nav Section-->
      <strong class='show-for-small-only'>
      <ul class='right'>
        <li class='has-dropdown'>
          <a href='#'>Dropdown2</a>
          <ul class='dropdown'>
              <li class='has-form-small'>
                <div class='row collapse'>
                  <div class='large-9 small-9 columns'>
                    <input type='text' placeholder='Find Stuff'>
                </div>
                <div class='large-3 small-3 columns'>
                    <a href='#' class='alert button expand'>Search</a>
                </div>
                </div>
              </li>
          </ul>
        </li>
      </ul>
      </strong>
    </section>

最终设法修复了。原来不需要下拉菜单选项

代码如下：

CSS:

.形状小{
颜色：深灰色；
位置：绝对位置；
顶部：0rem；
左：0rem；
最小宽度：26rem；
最小高度：2.7rem；}
@仅媒体屏幕{
.形状小{
颜色：深灰色；
最小宽度：26rem；
最小高度：2.7雷姆；
顶部：0rem；}
.有一个小的.按钮{
颜色：深灰色；
宽度：10rem；}}

HTML:

---

可能有更好的方法可以做到这一点（例如，用“&nspb”删除空白行），但我在背景颜色方面遇到了问题，这应该只是一个演示站点。

我认为您需要再次尝试准确描述问题所在。很难理解你。另外，你能把你发布的代码分解，只显示你觉得相关的部分吗？只是编辑一下。希望它更清晰。谢谢，更清晰了。我会让社区做出回应。

    <section class='top-bar-section'>
      <!-- Right Nav Section-->
      <strong class='show-for-small-only'>
      <ul class='right'>
        <li class='has-dropdown'>
          <a href='#'>Dropdown2</a>
          <ul class='dropdown'>
              <li class='has-form-small'>
                <div class='row collapse'>
                  <div class='large-9 small-9 columns'>
                    <input type='text' placeholder='Find Stuff'>
                </div>
                <div class='large-3 small-3 columns'>
                    <a href='#' class='alert button expand'>Search</a>
                </div>
                </div>
              </li>
          </ul>
        </li>
      </ul>
      </strong>
    </section>

    <style>
  .has-form-small {
    color: darkslategray;
    position: absolute;
    top: 0rem;
    left: 0rem;
    min-width: 26rem;
    min-height: 2.7rem;}
  @media only screen {
    .has-form-small {
      color: darkslategray;
      min-width: 26rem;
      min-height: 2.7rem;
      top: 0rem; }
    .has-form-small .button {
      color: darkslategray;
      width:  10rem;}}
</style>

<nav class='top-bar' data-topbar role='navigation'>
    <ul class='title-area'>
      <li class='name'>
        <h1><a href='#'>My Site</a></h1>
      </li>
      <strong class='hide-for-small-only'>
      <li class='has-form'>
        <div class='row collapse'>
          <div class='large-9 small-9 columns'>
            <input type='text' placeholder='Find Stuff'>
          </div>
          <div class='large-3 small-3 columns'>
            <a href='#' class='alert button expand'>Search</a>
          </div>
        </div>
      </li>
      </strong>
      <!-- Remove the class 'menu-icon' to get rid of menu icon. Take out 'Menu' to just have icon alone -->
      <li class='toggle-topbar menu-icon'><a href='#'><span>Menu</span></a></li>
    </ul>

    <section class='top-bar-section'>
      <!-- Right Nav Section -->
      <ul class='right'>
        <li><a>&nbsp</a></li>
        <li>
        <strong class='show-for-small-only'>
          <li class='has-form-small'>
              <div class='large-12 small-9 columns'>
                <input type='text' placeholder='Find Stuff'>
              </div>
              <div class='large-3 small-3 columns'>
                <a href='#' class='alert button expand'>Search</a>
              </div>
          </li>
        </strong>
        </li>
      </ul>



      <ul class='right'>
        <li><a href='#'>Button</a></li>
        <li class='has-dropdown'>
          <a href='#'>Dropdown</a>
          <ul class='dropdown'>
            <li><a href='#'>link</a></li>
            <li><a href='#'>link</a></li>
          </ul>
        </li>
      </ul>

      <!-- Left Nav Section -->
      <ul class='left'>

      </ul>
    </section>
  </nav>