JSFiddle - React, Tailwind, and code Playground

by bishopknight

HTML

<img id="test" onclick="test()" src="http://cdn-img.easyicon.net/png/126/12616.png" width="20px" height="20px" />
<div>
    <ul id="Menu">
        <li><a href="#">Add Above...</a>
        </li>
        <li><a href="#">Edit Inject...</a>
        </li>
        <li><a href="#">Delete Inject...</a>
        </li>
        <li><a href="#">Add Below...</a>
        </li>
    </ul>
</div>

CSS

#Menu {
            padding:0;
            margin:0;
            list-style-type:none;
            font-size:13px;
            color:#717171;
            width:105px;
            display: none;
            border: 1px solid #333;
        }
        #Menu li {
            border-bottom:1px solid #eeeeee;
            padding:7px 10px 7px 10px;
        }
        #Menu li:hover {
            color:White;
            background-color:#ffcc00;
            display: block;
        }
        #Menu a:link {
            color:#717171;
            text-decoration:none;
            display: block;
        }
        #Menu a:hover {
            color:White;
            display: block;
        }

JavaScript

$('#test').click(function () {
    $('#Menu').show('slow');
});