JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="footernav"> 
  <li class="selected"><!-- change this to selected to see the effect -->
    <a href="javascript:void(0)">
        <figure> <img src="http://lorempixel.com/200/200/fashion/" class="fluid">
                <figcaption>
                        <h3>Product Name</h3>
                </figcaption>
        </figure>    
    </a>
    <ul class="subnav"> 
      <li>
        <a href="javascript:void(0)">
        <figure> <img src="http://lorempixel.com/200/200/fashion/" class="fluid">
                <figcaption>
                        <h3>Product Name</h3>
                </figcaption>
        </figure>    
        </a>
    </li>

    <li>
        <a href="javascript:void(0)">
        <figure> <img src="http://lorempixel.com/200/200/fashion/" class="fluid">
                <figcaption>
                        <h3>Product Name</h3>
                </figcaption>
        </figure>    
        </a>
    </li>      <li>
        <a href="javascript:void(0)">
        <figure> <img src="http://lorempixel.com/200/200/fashion/" class="fluid">
                <figcaption>
                        <h3>Product Name</h3>
                </figcaption>
        </figure>    
        </a>
    </li>

    <li>
        <a href="javascript:void(0)">
        <figure> <img src="http://lorempixel.com/200/200/fashion/" class="fluid">
                <figcaption>
                        <h3>Product Name</h3>
                </figcaption>

        </figure>    
        </a>
    </li>v      <li>
        <a href="javascript:void(0)">
        <figure> <img src="http://lorempixel.com/200/200/fashion/" class="fluid">
                <figcaption>
                        <h3>Product Name</h3>
                </figcaption>
        </figure>    
        </a>
    </li>

    <li>
        <a href="javascript:void(0)">
        <figure> <img src="http://lorempixel.com/200/200/fashion/" class="fluid">
                <figcaption>
                        <h3>Product Name</h3>
              ...

CSS

a figure { display: inline-block; }
.footernav, .subnav { white-space: no-wrap; overflow: auto; white-space: nowrap; }
.footernav li, .subnav li { display: inline-block; border: 1px #000 solid; }
.subnav {
    display: none;
    border: 1px #f00 solid;
    background: #ccc;
    position: absolute;
    width: 100%;
}
li.selected .subnav { display: block; }
.footernav li:hover .subnav { display: block; }

JavaScript

$(".footernav > li").click(function() {
    $(this).toggleClass("selected");
});