响应性网站下拉表单问题

Question

我在foundation 5框架的下拉列表中遇到了一个表单问题。

基本上，我将一个输入字段和按钮分配给一个下拉菜单，这很好。

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

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

源代码如下：

CSS：

      .has-form-small {
        top: 0rem;
        left: 0rem;
        min-width: 15rem; }
      @media only screen and (max-width: 40em) {
        .has-form {
          min-width: 10rem;
          top: 0 rem; }
        .has-form .button {
          height: 3rem; } }
    </style>

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>

Answer 1

最终成功修复。原来不需要下拉菜单选项。

代码如下：

CSS：

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

HTML:

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

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