JSFiddle - React, Tailwind, and code Playground

by sophtwhere

HTML

<div id="menuwrapper">
  <ul>
    <li class="menu_clickable"><a href="#">Home</a>
    </li>
    <li class="menu_clickable"><a href="#">Products</a>
      <ul>
        <li class="menu_clickable"><a href="#">Product 1</a>
          <ul>
            <div class="scrolling_menu">

              <li class="menu_clickable"><a href="#">Sub Product 1</a>
              </li>
              <li class="menu_clickable"><a href="#">Sub Product 2</a>
              </li>
              <li class="menu_clickable"><a href="#">Sub Product 3</a>
              </li>
            </div>
            <div class="hover_top_bar">
              <div class="scroll_arrow scroll_up_arrow">

              </div>
            </div>
            <div class="hover_left_bar">&nbsp;</div>
            <div class="hover_right_bar">&nbsp;</div>
            <div class="hover_bottom_bar">
              <div class="scroll_arrow scroll_down_arrow">
              </div>

            </div>
          </ul>
        </li>
        <li class="menu_clickable"><a href="#">Product 2</a>
        </li>
        <li class="menu_clickable"><a href="#">Product 3</a>
        </li>
      </ul>
    </li>
    <li><a href="#">About Us</a>
      <ul>
        <div class="scrolling_menu">

          <li class="menu_clickable"><a href="#">Faqs</a>
          </li>
          <li class="menu_clickable"><a href="#">Contact Us</a>
          </li>
          <li class="menu_clickable"><a href="#">Where are we?</a>
          </li>
          <li class="menu_clickable"><a href="#">Faqs</a>
          </li>
          <li class="menu_clickable"><a href="#">Contact Us</a>
          </li>
          <li class="menu_clickable"><a href="#">Where are we?</a>
          </li>
          <li class="menu_clickable"><a href="#">Faqs</a>
          </li>
          <li class="menu_clickable"><a href="#">Contact Us</a>
          </li>
          <li class="menu_clickable"><a href="#">Where are we?</a>
          </li>
          <li class="menu_clickable"><a...

CSS

/* Define the body style */

body {
  font-family: Arial;
  font-size: 12px;
}

#maindiv {
  position: absolute;
  left: 200px;
  top: 0;
}


/* We remove the margin, padding, and list style of UL and LI components */

#menuwrapper ul,
#menuwrapper ul li {
  margin: 0;
  padding: 0;
  list-style: none;
}


/* We apply background color and border bottom white and width to 150px */

#menuwrapper ul li {
  background-color: #7f95db;
  border-bottom: solid 1px white;
  width: 150px;
  cursor: pointer;
}


/* We apply the background hover color when user hover the mouse over of the li component */

#menuwrapper ul li:hover {
  background-color: #6679e9;
  position: relative;
  z-index: 100;
}


/* We apply the link style */

#menuwrapper ul li a {
  padding: 5px 15px;
  color: #ffffff;
  display: inline-block;
  width: 100%;
  text-decoration: none;
}


/**** SECOND LEVEL MENU ****/


/* We make the position to absolute for flyout menu and hidden the ul until the user hover the parent li item */

#menuwrapper ul li ul {
  position: absolute;
  top: 0;
  display: none;
}


/* When user has hovered the li item, we show the ul list by applying display:block, note: 150px is the individual menu width.  */

#menuwrapper ul li:hover ul {
  left: 150px;
  display: block;
}


/* we apply different background color to 2nd level menu items*/

#menuwrapper ul li ul li {
  background-color: #cae25a;
}


/* We change the background color for the level 2 submenu when hovering the menu */

#menuwrapper ul li:hover ul li:hover {
  background-color: #b1b536;
}


/* We style the color of level 2 links */

#menuwrapper ul li ul li a {
  color: #454444;
  display: inline-block;
  width: 120px;
}


/**** THIRD LEVEL MENU ****/


/* We need to hide the 3rd menu, when hovering the first level menu */

#menuwrapper ul li:hover ul li ul {
  position: absolute;
  display: none;
  top: 0;
}


/* We show the third level menu only when they hover the second level menu parent */

#menuwrapper ul...

JavaScript

var amount = '';
var $$ = document.querySelector.bind(document)


function cancel_scroll() {
  if (this.scroller_timer) {
    clearInterval(this.scroller_timer);
    delete this.scroller_timer;
    delete this.scroll_delta;
  }
}

function do_scroll() {
  var prev = this.scroll_target.scrollTop;
  this.scroll_target.scrollTop = (prev + this.scroll_delta);
  if (this.scroll_target.scrollTop === prev) {
    if (prev === 0) {
      this.scroll_up_flag.style.visibility = 'hidden';
    } else {
      this.scroll_down_flag.style.visibility = 'hidden';
    }
    cancel_scroll.apply(this);
    return;
  }

  this.scroll_up_flag.style.visibility = 'visible';
  this.scroll_down_flag.style.visibility = 'visible';

}

function on_mouseover_top_bar() {
  this.scroll_delta = -5;
  if (!this.scroller_timer) {}
  this.scroller_timer = setInterval(this.scroller, 50);
}

function on_mouseover_bottom_bar() {
  this.scroll_delta = 5;
  if (!this.scroller_timer) {}
  this.scroller_timer = setInterval(this.scroller, 50);
}


function on_mouseover_option() {
  if (this.scroller_timer) {

    cancel_scroll.apply(this);
  }
  this.scroll_target.scrollTop = 0;
  this.scroll_up_flag.style.visibility = "hidden";
  this.scroll_down_flag.style.visibility = (this.scroll_target.scrollHeight > this.scroll_target.clientHeight) ? "visible" : "hidden";

}

function set_menu_hovers(level1s) {
  var i, l = level1s.length;
  for (i = 0; i < l; i++) {

    var menu_link = level1s[i],
      sibling = menu_link.parentElement.querySelector.bind(menu_link.parentElement);
    hover_top_bar = sibling("ul .hover_top_bar"),
      scrolling_menu = sibling(".scrolling_menu");

    if (hover_top_bar && scrolling_menu) {

      var hover_bottom_bar = sibling("ul .hover_bottom_bar");

      menu_link.scroll_target = scrolling_menu;
      scrolling_menu.scrollTop = 0;
      menu_link.scroller = do_scroll.bind(menu_link);

      menu_link.scroll_up_flag = hover_top_bar.querySelector('div');
     ...