JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">
    <div id="header-inner">
        <div id="logo"> <a href="#"><img src="img/assets/chartego-logo.png" alt="Chartego Logo"/></a>

        </div>	<a href="#" id="toggle-nav">Toggle navigation</a>

        <ul id="nav">
            <li id="user-profile"><a href="#"><img alt="User Name" height="23" width="23" src="img/profile-pics/profile-pic.png"/>
			<span class="profile-name">Paul O'Brien</span>
			</a>

                <ul class="tabs">
                    <li><a href="#">Users Name</a>
                    </li>
                    <li><a href="#">Account Settings</a>
                    </li>
                    <li><a href="#">Logout</a>
                    </li>
                </ul>
            </li>
            <li><a href="#">Chart it</a>
            </li>
            <li><a href="#" id="notify-btn">notifications</a>
            </li>
            <li><a href="#">Charts</a>
            </li>
            <li><a href="#">Discover</a>
            </li>
        </ul>
    </div>
</div>

CSS

/*
Paul O'Brien & Ben O'Brien
Copyright 2013, Chartego Ltd.
*/

/* =============================================================================
   Site Styles
   ========================================================================== */

/* =============================================================================
   TOP NAVIGATION
   ========================================================================== */
 body {
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #444;
    font-size: 62.5%;
    text-rendering: optimizeLegibility;
    background: #fff;
}
li {
    list-style: none;
}
a:link, a:visited {
    color: #4083a9;
    outline: none;
    text-decoration: none;
}
a:hover {
    text-decoration: none;
    color: #205f82;
}
.green-btn {
    background: #4cc44a;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
#header {
    width: 100%;
    height: 50px;
    background: #333;
    background: rgba(47, 47, 47, 0.98);
    z-index: 9997;
}
#header-inner {
    position: relative;
    margin: 0 auto;
    padding: 0 12px;
    max-width: 970px;
}
#logo {
    float: left;
    padding: 0px 20px 0 0;
}
#logo a {
    display: block;
    width: 82px;
    height: 50px;
    background-repeat: no-repeat;
    background-position: 0 50%;
    background-image: url(../img/assets/chartego-logo.png);
    -webkit-transition: opacity 0.2s ease;
    -moz-transition: opacity 0.2s ease;
    -o-transition: opacity 0.2s ease;
    transition: opacity 0.2s ease;
}
#logo img {
    height: 0;
}
#logo a:hover {
    opacity: .6;
}
#nav {
    margin: 0 0px 0 20px;
    color: #777;
    padding:0px;
    float:right;
}
#nav>li {
    float: right;
    font-size: 1.25em;
    line-height: 1;
}
#nav>li>a {
    display: block;
    height: 50px;
    padding: 0 20px;
    line-height: 50px;
    text-decoration: none;
    color: #999;
}
#nav>li#user-profile {
    float: right;
}
#nav>li img {
    float: right;
    position: relative;
 ...

JavaScript

/*	MAIN MENU DROPDOWN
===================================*/
$("#toggle-nav").click(function () {
    $("#nav").slideToggle('slow');
});

/*	MAIN SETTINGS SHOW AND HIDE
===================================*/

('.user-profile').hover(

function () {
    $(this).show();
},

function () {
    $(this).hide();
});