响应式网站下拉表单问题

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”删除空白行），但我遇到了背景颜色问题，这应该只是一个演示站点。

响应式网站下拉表单问题

Responsive Website Dropdown form issue

zurb-foundation

zurb-foundation-5