Responsive Website Dropdown form issue

Question

I am having a bit of a problem with a form on a drop down in the foundation 5 framework.

Basically I am assigning an input field and button to a dropdown menu, which works fine.

But as I can't firstly see a Back button like I can on the first dropdown, I can't see any reasons why. When basic code is a replication.

After viewing the second dropdown and going back to the menu to view dropdown one the input field and button are visible...

Source code below:

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

Dropdown 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

Managed to fix in the end. Turns out a drop down menu option isn't needed.

Code as below:

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>

There may be better ways to do this (e.g. remove blank row with "&nspb") but I was having issues with background colours, and this is supposed to only be a demo site.