JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cherne.net/brian/resources/jquery.hoverIntent.js"></script>
<script src="http://users.tpg.com.au/j_birch/plugins/superfish/js/superfish.js"></script>
<ul id="menu" >
    <li>
        <a href="/_news_static"><img alt="" class="arrow" src="http://goo.gl/4zwvv">Pages</a>
        <ul>
            <li>
                <a href="/_news_table_of_contents" >Table of Contents</a>
            </li>
        </ul>
    </li>
</ul>
<noscript>
    <style type="text/css">
       #menu li:hover > ul { display: block; }
    </style>
</noscript>

CSS

ul { width: 200px; }
#menu li { position: relative; }
#menu a { display: block; width: 100%; }
#menu a:hover{ background: lightgreen;}
#menu li ul { display: none; }
#menu ul { position:absolute; top:0px; right:-200px; border: 1px solid black; }
.arrow { align: right; position: absolute; right: 3px; vspace: 4px; width: 8px; height: 7px; }

JavaScript

/*
$('#menu').superfish({
    delay: 2000,
    animation: {
        opacity: 'show',
        height: 'show'
    },
    speed: 'fast',
    autoArrows: false
});
*/