JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header_container">
    <h1>This is Header</h1>
    <div id="personal_menu">
        <ul>
            <li>
                Welcome back user!
            </li>
            <li class="main_link">
                <a href="#">My links</a>
                <ul class="sublink" style="display: block;">
                    <li><a href="#">link 1</a></li>
                    <li><a href="#">link 2</a></li>
                    <li><a href="#">link 3</a></li>
                    <li><a href="#">link 4</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Logout</a>    </li>
        </ul>
    </div>
</div>

CSS

#header_container{
    width:960px;
    padding: 10px 15px;
    margin: 0 auto;
}
#header_container{
    background:#BED308;
    height:218px;
    -moz-border-radius: 0 0  40px 40px;
    border-radius: 0 0  40px 40px;
}
#personal_menu{
    overflow: none;
    position: relative;
    right: 0;
    top: 135px;
    width: 100%; 
}
#personal_menu ul, #main_menu ul{ list-style-type:none;}
#personal_menu ul{
    float: right;
    margin-top: 5px;
}
#personal_menu li{
    float: left;
    text-align: center;
}
#personal_menu li{
    margin: 0;
    padding: 3px 5px;
}
#personal_menu li a{
    color: #f00;
    text-decoration:none;
}
#personal_menu li a:hover{
    text-decoration:underline;
}
#personal_menu ul li ul {
    display: none;
    position: absolute;
    width: 160px;
    border: 1px solid #ccc;
    padding: 10px 0;
    z-index: 1000;
}

JavaScript

$(function() {
    $(".main_link").click(function() {
        $(".sublink").toggle();
    });
});