Dynamic sticky submenu

Show us what you have at the moment.

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.

Which theme are you workign with?

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

Unfortunately we can’t help with hypothetical environments

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)

Yes, but you need to link to your website or we cannot help you.

I am also looking to do something similar. There is an example here:
https://www.cfmt.org

That is not a WordPress website but it does show what I am trying to do. If you click on the give “Give” tab the submenu shows horizontally below the main nav and stays there.

Is this possible with a plugin that anyone knows about or would it better to build it out with CSS?

Thanks for any suggestions or tips.