JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css">
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<script src="http://www.modernizr.com/downloads/modernizr-latest.js"></script>
<div class="product" id="btn">
    Menu
</div>

<div id='menu_container'>
    <ul id="menu">
        
    </ul>
</div>

CSS

.product {
    float: left;
    position: relative;
    width: 100px;
    height: 100px;
    background:green;
    margin: 0;
    margin-right:2px;
    padding: 0;
}
.no-touch. .product:hover{
    background-color: black;
    color:white;
    transition: background .2s linear, color .2s linear;
    -moz-transition: background .2s linear, color .2s linear;
    -webkit-transition: background .2s linear, color .2s linear;
    -o-transition: background .2s linear, color .2s linear;
}

#menu_container {
    display:none;
    width:150px;
    padding-top: 100px;
    margin-right:100px;
}
#menu > li{
     width:100%;   
}

.no-touch #menu > li:hover{
    background:green;
}

}
#menu h2 {
    font-size: 1em;
    text-transform: uppercase;
    padding: 5px 10px;
}
#template img {
    margin: 5px 20px 0 0;
    float: left;
}
#template {
    width: 380px;
}
#template ol {
    float: left;
    margin: 0 0 0 30px;
    padding: 10px 10px 0 10px;
}
#template:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
#template .k-button {
    float: left;
    clear: left;
    margin: 5px 0 5px 12px;
}

JavaScript

//Make the kendoMenu
$("#menu").kendoMenu({
    orientation:'vertical',
    dataSource:[
        {text:'Google', url:'Google.com'},
        {text:'Amazon', url:'Amazon.com'},
        {text:'News Sites', items:[
            {text:'NY Times', url:'nytimes.com.com'},
            {text:'Tech Crunch', url:'techcrunch.com'},
            {text:'Google News', url:'news.google.com'}
        ]}
    ]
});     

$("#btn").click(function(){
    $("#menu_container").css('display', 'block');
});

$("#btn").mouseover(function(){
    $("#menu_container").css('display', 'block');
});

$("#btn").mouseout(function(){
    $("#menu_container").css('display', 'none');
});

$("#menu_container").mouseover(function(){
    $("#menu_container").css('display', 'block');
});

$("#menu_container").mouseout(function(){
    $("#menu_container").css('display', 'none');
});