JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="buttons">
    <li><a href="#" data-tag="b">Жирный</a></li>
    <li><a href="#" data-tag="i">Курсив</a></li>
    <li class="menu">
        <a href="#">Smile</a>
        <ul class="buttons">
            <li><a href="#" data-img="http://fctomtomsk.ru/sites/all/modules/fktom_helper/smiles/oo.gif" style="background-image: url(http://fctomtomsk.ru/sites/all/modules/fktom_helper/smiles/oo.gif);"></a></li>
            <li><a href="#" data-img="http://fctomtomsk.ru/sites/all/modules/fktom_helper/smiles/wink.gif" style="background-image: url(http://fctomtomsk.ru/sites/all/modules/fktom_helper/smiles/wink.gif);"></a></li>
            <li><a href="#" data-img="http://fctomtomsk.ru/sites/all/modules/fktom_helper/smiles/tongue.gif" style="background-image: url(http://fctomtomsk.ru/sites/all/modules/fktom_helper/smiles/tongue.gif);"></a></li>
        </ul>
    </li>
</ul>
<textarea cols="52" rows="4" class="editor"></textarea>

CSS

ul.buttons {
    display: block;
}
ul.buttons li {
    display: inline-block;
}
ul.buttons li.menu {
    position: relative;
}
ul.buttons li.menu ul.buttons {
    display: none;
    position: absolute;
    width: 100px;
    border: 1px solid black;
    background: #CCC;
}
ul.buttons li.menu ul.buttons li a {
    display: block;
    float: left;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
}

JavaScript

$('li.menu').hover(
    function() {
        $(this).children('ul.buttons').show();
    },
    function() {
        $(this).children('ul.buttons').hide();
    });
$('ul.buttons a').click(function() {
    var $ta = $('.editor');
    var tag = $(this).data('tag');
    var img = $(this).data('img');
    if (tag) {
        $ta.val($ta.val() + '<' + tag + '></' + tag + '>');
    }
    else if (img) {
        console.info('asd');
        $ta.val($ta.val() + '<img src="' + img + '"/>');
    }
});