my dropdown

by narensrinivasans

HTML

<ul class="afterLogin">
						<li><a href="javascript:void(0);"><i class="foundicon-edit"></i>Tasks</a>
                            <ul class="dropdown-menu" id="my_tasks_dropdown_menu">
                            <li class="heading">
                            <h5>My Tasks</h5>
                            </li>
                            <li>
                            <a href="javascript:void(0);"><h6>Tasks I've posted</h6>
                            <p>Tasks waiting to be assigned or completed</p>
                            </a></li>
                            <li>
                            <a href="javascript:void(0);"><h6>Tasks I'm running</h6>
                            <p>Tasks currently assigned to me</p>
                            </a></li>
                            <li>
                            <a href="javascript:void(0);"><h6>Post a Task</h6>
                            <p>Get help with everyday tasks &amp; errands</p>
                            </a></li>
                            <li class="foot see-all"><a href="javascript:void(0);">Browse Tasks</a></li>
                            </ul>
                        </li>
						<li><a href="javascript:void(0);"><i class="foundicon-mail"></i>Alerts</a>
                            <ul class="dropdown-menu" id="my_notifications_dropdown_menu">
                            <li class="heading">
                            <h5>My Alerts</h5>
                            </li>
                            
                            <li class="my-notification empty" data-url="javascript:void(0);">
                            <div class="description">
                            <div class="text">
                            <h6 class="title">You have no Alerts</h6>
                            <p>Alerts inform you when you something relevant to you happens on Airtasker.</p>
                            </div>
                            <div class="time">
                            <span...

CSS

.afterLogin { display:block; list-style:none; }
.afterLogin li { line-height:10px; margin:12px 0 0 20px; }
.afterLogin li a { font-size:8pt; font-weight:lighter; text-align:center; }
.afterLogin li a i { font-size:25px; line-height:25px; display:block; clear:both; }
.afterLogin li ul { display:none; width:300px; float:left; position:absolute; list-style:none; top:60px; right:-10px; box-shadow:0px 0px 10px rgb(51, 51, 51); -webkit-box-shadow:0px 0px 10px rgb(51, 51, 51); -moz-box-shadow:0px 0px 10px rgb(51, 51, 51); -o-box-shadow:0px 0px 10px rgb(51, 51, 51); -webkit-border-radius: 6px; border-radius: 6px; border:1px solid #eee; z-index:900; }
.afterLogin li ul li { margin:0; padding:5px 20px; width:280px; background:#fff; }
.afterLogin li ul li.heading, .afterLogin li ul li.foot { background:#eee; height:40px; line-height:40px; }
.afterLogin li ul li.heading h5 {  }
.afterLogin li ul li.heading img { max-height:37px; max-width:37px; float:left; padding-right:20px; }
.afterLogin li ul li a, .afterLogin li ul li h6, .afterLogin li ul li p { text-align:left; margin:0; padding:0; }
h5
{
    font-size: 18px;
    font-size: 1.5rem;
    font-weight: normal;
    margin-bottom: 3px;
}
h6
{
    font-size: 15px;
    font-size: 1.5rem;
    font-weight: normal;
}

JavaScript

$(document).ready(function(){

$('.afterLogin li').click(function(){
$(this).children('ul').show();
});

});

$(document).mouseup(function (e){
$('.afterLogin li ul').hide();
});