JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.1.min.js"></script>
<div class="foodmenu">
<ul>
<li>
<a href='#'>Fruits</a>
<ul>
<li><a href='#' id="apple" class="food">Apple</a></li>
<li><a href='#' i="blueberries" class="food">Blueberries</a></li>
<li><a href="#" id="papaya" class="food">papaya</a></li>
<li><a href="#" id="strawberry" class="food">Strawberry</a></li>
<li><a href='#' id="cherries" class="food">Cherries</a></li>
<li><a href='#' id="grapefruit" class="food">Grapefruit</a></li>
<li><a href='#' id="grapes" class="food">Grapes</a></li>
<li><a href='#' id="orange" class="food">Orange</a></li>
<li><a href='#' id="pear" class="food">Pear</a></li>
<li><a href='#' id="cantaloupe" class="food">Cantaloupe</a></li>
<li><a href='#' id="mango" class="food">Mango</a></li>
<li><a href='#' id="nectarines" class="food">Nectarines </a></li>
<li><a href='#' id="peaches" class="food">Peaches</a></li>
<li><a href='#' id="plums" class="food">Plums </a></li>
<li><a href='#' id="tangerines" class="food">Tangerines</a></li>
<li><a href='#' id="watermelon" class="food">Watermelon</a></li>
</ul>
</li>
<li>
<a href='#'>Vegetables</a>
<ul>
<li><a href='#' id="beets" class="food">Beets</a></li>
<li><a href='#' id="acornsquash" class="food">Acorn Squash</a></li>
<li><a href='#' id="butternutsquash" class="food">Butternut squash</a></li>
<li><a href='#' id="carrots" class="food">Carrots, Raw</a></li>
<li><a href='#' id="babycarrots" class="food">Baby Carrots</a></li>
<li><a href='#' id="sweetpotato" class="food">Sweet...
CSS
body {
padding:20px;
}
#container {
border:solid 1px #ccc;
margin-top: 39px;
width:936px;
height:550px;
}
/* Reset */
.foodmenu ul, .menu li { margin: 0; padding: 0; }
.foodmenu ul { list-style: none; }
.foodmenu a { text-decoration: none; }
.foodmenu a:hover { text-decoration: none; background-color:#026E84; }
/* Flavor */
.foodmenu a {
display: block;
padding: 10px;
color: #fff;
width: 114px;
text-align:center;
}
.foodmenu li a { background-color: #27a3bc; }
.foodmenu li li a { background-color: #999999; }
/* Positioning */
.foodmenu li {
z-index:1;
position: relative;
float: left;
}
.foodmenu li ul { position: absolute; width: 268px; }
.foodmenu li li ul { width: 114px; }
/* Hover */
.foodmenu li > ul { display: none; }
.foodmenu li:hover > ul { display: block; }
.foodmenu li:last-child ul{
right:0;
width:134px;
}
JavaScript
var stage, layer;
var sources = {
plate: 'http://www.healncure.com/wp-content/uploads/2014/03/plate1.jpg',
acornsquash: 'http://www.healncure.com/wp-content/uploads/2014/03/acorn-squash.png',
AlmondButter: 'http://www.healncure.com/wp-content/uploads/2014/03/AlmondButter.png',
almonds: 'http://www.healncure.com/wp-content/uploads/2014/03/almonds.png',
apple: 'http://www.healncure.com/wp-content/uploads/2014/03/apple.png',
avocadooil: 'http://www.healncure.com/wp-content/uploads/2014/03/avocadooil.png',
babycarrots: 'http://www.healncure.com/wp-content/uploads/2014/03/babycarrots.png',
barley: 'http://www.healncure.com/wp-content/uploads/2014/03/barley.png',
beans: 'http://www.healncure.com/wp-content/uploads/2014/03/beans.png',
beansoup: 'http://www.healncure.com/wp-content/uploads/2014/03/beansoup.png',
beef: 'http://www.healncure.com/wp-content/uploads/2014/03/beef.png',
beets: 'http://www.healncure.com/wp-content/uploads/2014/03/beets.png',
blueberries: 'http://www.healncure.com/wp-content/uploads/2014/03/blueberries.png',
Broccoli: 'http://www.healncure.com/wp-content/uploads/2014/03/Broccoli.png',
brownrice: 'http://www.healncure.com/wp-content/uploads/2014/03/brownrice.png',
bulgur: 'http://www.healncure.com/wp-content/uploads/2014/03/bulgur.png',
butternutsquash: 'http://www.healncure.com/wp-content/uploads/2014/03/butternutsquash.png',
cantaloupe: 'http://www.healncure.com/wp-content/uploads/2014/03/cantaloupe.png',
carrots: 'http://www.healncure.com/wp-content/uploads/2014/03/carrots.png',
Cauliflower: 'http://www.healncure.com/wp-content/uploads/2014/03/Cauliflower.png',
cherries: 'http://www.healncure.com/wp-content/uploads/2014/03/cherries.png',
chicken: 'http://www.healncure.com/wp-content/uploads/2014/03/chicken.png',
coconutoil: 'http://www.healncure.com/wp-content/uploads/2014/03/coconutoil.png',
cottagecheese:...