Split-menu and top-search

I'd like to add search functionality to the split-menu header style. When I insert the top search icon, the search function works in IE11, but not Firefox or Chrome. Thanks in advance for any help or suggestions.

<!-- Header
		============================================= -->
		<header id="header" class="split-menu">

			<div id="header-wrap">

				<div class="container clearfix">

					<div id="primary-menu-trigger"><i class="icon-reorder"></i></div>

					<!-- Logo
					============================================= -->
					<div id="logo">
						<a href="index.html" class="standard-logo" data-dark-logo="images/logo-dark.png"><img src="images/logo.png" alt="Canvas Logo"></a>
						<a href="index.html" class="retina-logo" data-dark-logo="images/logo-dark@2x.png"><img src="images/logo@2x.png" alt="Canvas Logo"></a>
					</div><!-- #logo end -->

					<!-- Primary Navigation
					============================================= -->
					<nav id="primary-menu" class="with-arrows clearfix">

						<ul>
							<li><a href="#"><div>Home</div></a></li>
							<li><a href="#"><div>Explore</div></a>
								<ul>
									<li><a href="#"><div>NextGen Framework</div></a></li>
									<li><a href="#"><div>Stunning Graphics</div></a></li>
									<li><a href="#"><div>Secured Solutions</div></a></li>
								</ul>
							</li>
							<li><a href="#"><div>Pricing</div></a></li>
						</ul>

						<ul>
							<li><a href="#"><div>FAQs</div></a></li>
							<li><a href="#"><div>Gallery</div></a></li>
							<li><a href="#"><div>Login</div></a></li>
							<!-- Top Search
							============================================= -->
							<div id="top-search" >
								<a href="#" id="top-search-trigger"><i class="icon-search3" style="font-size: 200%; color: #ED1B34"></i><i class="icon-line-cross"></i></a>
								<form action="../ssi/search.html" method="get">
									<input type="text" name="q" class="form-control" value="" placeholder="Type & Hit Enter..">
								</form>
							</div><!-- #top-search end -->
						</ul>

					</nav><!-- #primary-menu end -->

				</div>

			</div>

		</header><!-- #header end -->

For those looking for a workaround to this issue, I found moving the top-search div in between the two "ul" of the split menu, got the top search feature to work. Since top-search is set to float-right, it still appears on the far right of the menu. The only remaining issue I seem to have is getting the placeholder text to appear in IE.

<!-- Primary Navigation
					============================================= -->
					<nav id="primary-menu" class="with-arrows clearfix">

						<ul>
							<li><a href="#"><div>Home</div></a></li>
							<li><a href="#"><div>Explore</div></a>
								<ul>
									<li><a href="#"><div>NextGen Framework</div></a></li>
									<li><a href="#"><div>Stunning Graphics</div></a></li>
									<li><a href="#"><div>Secured Solutions</div></a></li>
								</ul>
							</li>
							<li><a href="#"><div>Pricing</div></a></li>
						</ul>
						<!-- Top Search  -->
						<div id="top-search" >
								<a href="#" id="top-search-trigger"><i class="icon-search3" style="font-size: 200%; color: #ED1B34"></i><i class="icon-line-cross"></i></a>
								<form action="../ssi/search.html" method="get">
									<input type="text" name="q" class="form-control" value="" placeholder="Type & Hit Enter..">
								</form>
						</div>
						<!-- #top-search end -->
						
						<ul>
							<li><a href="#"><div>FAQs</div></a></li>
							<li><a href="#"><div>Gallery</div></a></li>
							<li><a href="#"><div>Login</div></a></li>
							
							
						</ul>

					</nav><!-- #primary-menu end -->