JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div class="product-submenu-container">
  <div class="row collapse">
    <div class="medium-3 columns">
      <h3>products</h3>
      <ul class="submenu-list">
        <li><a href="#!" class="hoverme1">KB1</a></li>
        <li><a href="#!" class="hoverme2">KB2</a></li>
        <li><a href="#!" class="hoverme3">KB3</a></li>
        <li><a href="#!" class="hoverme4">REED</a></li>
      </ul>
    </div>
    <div class="medium-9 columns">
      <div class="product-banner placehold">
        <h3>This is some placeholder text</h3>
        <p>This is some placeholder text, it should sit next to the list and should be visible when nothing else is hovered.</p>
      </div>
      <div class="product-banner showme1">
        <div class="row">
          <div class="large-8 columns">
            <h3>KB1</h3>
            <p><em>Some placeholder text</em></p>
            <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
          </div>
          <div class="large-4 columns">
            <img src="http://placehold.it/200" />
          </div>
        </div>
      </div>
      <div class="product-banner showme2">
        <h3>KB2</h3>
      </div>
      <div class="product-banner showme3">
        <h3>KB3</h3>
      </div>
      <div class="product-banner showme4">
        <h3>REED</h3>
      </div>
    </div>
  </div>
</div>

CSS

.showme1, .showme2, .showme3, .showme4 {
  display: none;
}

JavaScript

$(document).ready(function () {
    $(".hoverme1").mouseover(function () {
      $("div.showme1").show();
      $("div.placehold").hide();
    });
    $(".hoverme1, div.showme1").mouseleave(function () {
      $("div.showme1").hide();
       $("div.placehold").show();
    });
    $("div.showme1").mouseover(function () {
      $(this).stop(true, true).show();
    });
  });

$(document).ready(function () {
  $(".hoverme2").mouseover(function () {
    $("div.showme2").show();
    $("div.placehold").hide();
  });
  $(".hoverme2, div.showme2").mouseleave(function () {
    $("div.showme2").hide();
    $("div.placehold").show();
  });
  $("div.showme2").mouseover(function () {
    $(this).stop(true, true).show();
  });
});

$(document).ready(function () {
  $(".hoverme3").mouseover(function () {
    $("div.showme3").show();
    $("div.placehold").hide();
  });
  $(".hoverme3, div.showme3").mouseleave(function () {
    $("div.showme3").hide();
     $("div.placehold").show();
  });
  $("div.showme3").mouseover(function () {
    $(this).stop(true, true).show();
  });
});

$(document).ready(function () {
  $(".hoverme4").mouseover(function () {
    $("div.showme4").show();
    $("div.placehold").hide();
  });
  $(".hoverme4, div.showme4").mouseleave(function () {
    $("div.showme4").hide();
     $("div.placehold").show();
  });
  $("div.showme4").mouseover(function () {
    $(this).stop(true, true).show();
  });
});