JSFiddle - React, Tailwind, and code Playground

by bkvirendra

HTML

<a href="javascript:void(0)" id="a"><img src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/157182_100000109274242_1791636532_q.jpg">cl</a>
<ul class="item" id="Notificationmsg">
    <li><a href="#">Get a friend to sign up before Recess</a></li>
    <li><a href="#">Choose a display picture</a></li>
</ul>

CSS

.item {
    position:fixed;
    margin-top:1px;
    display:none;
}

li   {
    display:block;
    margin-top:-4px;
    padding-top:-1px;
    margin-left:60px;
    padding: 3px 3px 3px 3px;
    padding-left:15px;
    padding-right:15px;
    font-size:14px;
    margin-bottom:2px;
    border: 1px solid grey;
    background-color:white;
    color:grey;
}

JavaScript

$("#a").click(function(e) {
    e.stopPropagation();
    $(".item").show();
});

$(document).click(function() {
    $(".item").hide();
});