JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css">
<ul class="topnav">
    <li><a href="#"><span>One</span></a>
        <ul class="subnav">
            <li><a href="#">A</a></li>
            <li><a href="#">B</a></li>
            <li><a href="#">C</a></li>
        </ul></li>
    <li><a href="#"><span>Two</span></a></li>
    <li>
        <li><a href="#"><span>Three</span></a>
        <ul class="subnav">
            <li><a href="#">A</a></li>
            <li><a href="#">B</a></li>
            <li><a href="#">C</a></li>
        </ul>
    </li>
</ul>

CSS

.subnav { display: none; }
.topnav > li { display: inline-block; vertical-align: top; }

JavaScript

$(function() {
    $("ul.topnav li").hover(function() {
      var timeout = $(this).data("timeout");
      if(timeout) clearTimeout(timeout);
      $(this).find("ul.subnav").slideDown('fast');
    }, function() {
        $(this).data("timeout", setTimeout($.proxy(function() {
            $(this).find("ul.subnav").slideUp();
        }, this), 500));
    });
    $(document).click(function() {
        $('ul.subnav:visible').hide();
    });
});