JSFiddle - React, Tailwind, and code Playground

by drewP

HTML

<div id="menu_container">

</div>

CSS

.menu_container{
    width : 200px;
    background-color : #136eb4;
    padding : 5px;
   
}
.menu_ul{
    margin : 5px 0 5px 5px;
    width : 190px;
}
.menu_has_submenu .menu_ul{
    margin : 0;
    width : 190px;
    display : none;
    position : absolute;
    left : 190px;
    top : -1px;
    z-index : 10;
    border : 1px solid #ccc;
}
.menu_has_submenu .menu_ul .menu_li{
    background-position : 10% 20%;
    background-color : #fff;
    text-indent : 30px;
    margin : 0;
    
}
.menu_has_submenu .menu_ul .menu_li{
    border : 0;
}
.menu_li.menu_has_submenu:hover{
   background : #fff; 
}
.menu_has_submenu:hover .menu_ul{
    display : block;
}

.menu_li {
    margin : 1px 0;    
    padding-left : 10px;
    position : relative;
    width : 100%;
    background-color : #edf7ff;
    background-image : url(http://www.rednacionalmunicipios.secretariadoejecutivo.gob.mx/work/models/REPUVE/Template/2/1/images/bullet_bloqueLI.png);
    background-repeat : no-repeat;
    background-position : 90% 50%;
    cursor : normal;
}
.menu_li:hover {
    background-color : #fff;
    margin : 0;
    border-top : 1px solid #ccc;
    border-bottom : 1px solid #ccc;
}
.menu_li.menu_has_submenu:hover {
    z-index : 20
}
.menu_li .menu_link{
    display : block;
    text-transform :capitalize;
}
.menu_li h1.menu_link{
    color : #000;
}
.menu_li a.menu_link{
    color : #55f;
    text-decoration : none;
}

.menu_li a.menu_link{
    text-decoration : underline;
    color : #c47846;
}


.menu_li .menu_desc{
    color : #ccc;
    font-size : 80%;
}

JavaScript

(function($,window,undefined){
    var o;
    $.fn.amazonLikeMenu = function(data,options){
        o = $.extend({},options,$.fn.amazonLikeMenu.defaultOptions);
        return this.each(function(){
            createMenu($(this).addClass(o.classPrefix + '_container'),data);
        });
    };
    $.fn.amazonLikeMenu.defaultOptions = {
        classPrefix : "menu",
        eventPrefix : "menu"
    };
    function createMenu(container,data,options){
        
        container.data('initial_data',data);
        
        var ul = $('<ul />').addClass(o.classPrefix + '_ul').appendTo(container),
            liTemplate = $('<li />').addClass(o.classPrefix + '_li'),
            descTemplate = $('<span />').addClass(o.classPrefix + '_desc'),
            linkTemplate = $('<a href="#"/>').addClass(o.classPrefix + '_link'),
            hTemplate = $('<h3 />').addClass(o.classPrefix + '_link');
        
        $.each(data,function(i,el){
            var li = liTemplate.clone().appendTo(ul);
            if(el.title && el.link)
                if(typeof el.link === 'string')
                    linkTemplate 
                        .clone()
                        .text(el.title)
                        .attr('href',el.link)
                        .appendTo(li);
                       
                else
                    {
                        createMenu(li.addClass(o.classPrefix + '_has_submenu').append(hTemplate.clone().text(el.title)),el.link,o);
                    }
             if(el.desc)
                descTemplate
                    .clone()
                    .text(el.desc)
                    .appendTo(li);
        });
    };
})(jQuery,window)
$(document).ready(function(){
    // the menu data (links,description)
    var data = [
        {
            title : 'link 1',
            link : '#page1'
        },
        {
            title : 'link 2',
            link : '#page2',
            desc : 'this is an awesome link'
        },
        {
           ...