Dynamic sticky submenu

This is what I got in the header.php:

<div class="columns medium-11 large-9"> 

	    <!-- First Level Navigation -->
	    <?php

		wp_nav_menu( array(

			'theme_location' => 'mainMenu',
			'container_class' => 'container',
			'menu_class' => 'main-navigation hide-for-small-only',
			) ); ?>

			<!-- <ul class="main-navigation hide-for-small-only" role="navigation">
			  <li><a href="#" data-submenu="submenu1">Listpoint1</a></li>
			  <li><a href="#" data-submenu="submenu2">Listpoint2</a></li>
			  <li><a href="#" data-submenu="submenu3">Listpoint3</a></li>
			  <li><a href="#" class="active" data-submenu="submenu4">Listpoint4</a></li>
			  <li><a href="#" data-submenu="submenu5">Listpoint5</a></li>
			  <li><a href="#" data-submenu="submenu6"><i class="fi-magnifying-glass bigger"></i></a></li>
			  <li>
			    <a href="#" data-submenu="submenu7"><i class="fi-web bigger"></i><small>Login</small></a>
			  </li>
			</ul> -->

	    <!-- Second level Navigations -->
	    <div class="sticky">
		  <nav class="top-bar second-navigation" data-topbar role="navigation">
		    <ul class="title-area show-for-small-only">
		      <li class="name left-off-canvas-toggle"><img src='img/placeholder/logo2.png' width="50" />Menu</li>
		       <!-- 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>SubMenu</span></a></li>
		    </ul>

		    <section class="top-bar-section" id="submenu1">
		      <!-- Left Nav Section -->
		      <ul class="left">
		        <li><a href="#">Listpoint1</a></li>
		        <li><a href="#">Listpoint2</a></li>
		      </ul>
		    </section>

		    <section class="top-bar-section" id="submenu2">
		      <!-- Left Nav Section -->
		      <ul class="left">
		        <li class="has-dropdown active">
		          <a href="#">Listpoint1</a>
		          <ul class="dropdown">
		            <li><a href="#">ListpointDropdown1</a></li>
		            <li><a href="#">ListpointDropdown2</a></li>
		            <li><a href="#">ListpointDropdown3</a></li>
		          </ul>
		        </li>
		        <li><a href="#">Listpoint2</a></li>
		        <li><a href="#">Listpoint3</a></li>
		        <li><a href="#">Listpoint4</a></li>
		        <li><a href="#">Listpoint5</a></li>
		      </ul>
		    </section>

		    <section class="top-bar-section" id="submenu3">
		      <!-- Left Nav Section -->
		      <ul class="left">
		        <li class="has-dropdown">
		          <a href="#">Listpoint1</a>
		          <ul class="dropdown">
		            <li><a href="#">ListpointDropdown1</a></li>
		            <li><a href="#">ListpointDropdown2</a></li>
		            <li><a href="#">ListpointDropdown3</a></li>
		          </ul>
		        </li>
		        <li class="has-dropdown">
		          <a href="#">Listpoint2</a>
		          <ul class="dropdown">
		            <li><a href="#">ListpointDropdown1</a></li>
		            <li><a href="#">ListpointDropdown2</a></li>
		          </ul>
		        <li class="active"><a href="#">Listpoint2</a></li>
		      </ul>
		    </section>

		    <section class="top-bar-section" id="submenu4">
		      <!-- Left Nav Section -->
		      <ul class="left">
		        <li><a href="#">Listpoint1</a></li>
		        <li><a href="#">Listpoint2</a></li>
		        <li><a href="#">Listpoint3</a></li>
		        <li class="has-dropdown">
		          <a href="#">Listpoint4</a>
		          <ul class="dropdown">
		            <li><a href="#">@ Listpoint5</a></li>
		          </ul>
		        </li>
		      </ul>
		    </section>

		    <section class="top-bar-section" id="submenu5">
		      <!-- Left Nav Section -->
		      <ul class="left">
		        <li><a href="#">Downloads</a></li>
		        <li><a href="#">Newsletter</a></li>
		      </ul>
		    </section>

		    <section class="top-bar-section" id="submenu6">
		      <!-- Left Nav Section -->
		      <ul class="right">
		        <li class="has-form">
		          <div class="row collapse">
		            <div class="large-8 small-9 columns">
		              <input type="text" placeholder="Search WSA">
		            </div>
		            <div class="large-4 small-3 columns">
		              <a href="#" class="button expand">Search</a>
		            </div>
		          </div>
		        </li>
		      </ul>
		    </section>

		    <section class="top-bar-section" id="submenu7">
		      <!-- Left Nav Section -->
		      <ul class="right">
		        <li class="has-form">
		          <input type="text" placeholder="User">
		        </li>
		        <li class="has-form">
		          <input type="text" placeholder="Password">
		        </li>
		        <li class="has-form">
		          <a href="#" class="button expand">Login</a>
		        </li>
		      </ul>
		    </section>
		  </nav>
		</div>

	  </div>

And this is my functions.php:

<?php
	add_theme_support('menus');

register_nav_menus( array(
	'mainMenu' => 'Main Navigation'
));

?>

I’m sorry, but I can’t send you a link of the HTML page I’m trying to change into a WordPress theme since I have it running only offline on my PC.

I am not working with any existing theme. I am trying to convert an HTML site to a WordPress theme from scratch.

I just need help with adding a dynamic sub-menu to an existing main-menu so that the sub-menu (which should be in one line/not a list) changes its points while hovering over the elements of the main-menu, depending on which main-element the mouse is pointing at.

I’ve tried some solutions, people are offering on other sites, but nothing works for me. (Or I do not understand what has to be in the code, besides the code they are offering, to work)