Responsive Website Dropdown form issue - zurb-foundation

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.