JSFiddle - React, Tailwind, and code Playground

by Dipak1991

HTML

<div class="header"> <a href="javascript:void(0);">Sign In</a>
 <a href="javascript:void(0);">Sign Out</a>

</div>
<div class="body">
    <div class="logo"></div>
    <div class="slidinginfo"></div>
    <div class="contactinfo">
        <ul>
            <li>Company Name</li>
            <li>Company Address</li>
            <li>Etc</li>
        </ul>
    </div>    <div class="clearfix"></div>
</div>
<div class="nav-bar">
    <ul>
        <li><a href="javascript:void(0);">Home</a>

        </li>
        <li><a href="javascript:void(0);">Link2</a>
        </li>
        <li><a href="javascript:void(0);">Dropdown2</a>

            <ul class="submenu">
                <li><a href="javascript:void(0);">Sumenu</a>

                </li>
                <li><a href="javascript:void(0);">Sumenu</a>

                </li>
                <li><a href="javascript:void(0);">Sumenu</a>

                </li>
            </ul>
        </li>
    </ul>
</div>
<div class="footer">Footer</div>

CSS

html {
    margin:0;
    padding:0;
    box-sizing: border-box;
}
.header {
    position: fixed;
    top:0;
    left:0;
    right:0;
    height:20px;
    background: #797979;
    text-align: right;
}
.footer {
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    text-align: center;
}
.body {
    position: relative;
    width:100%;
    height:100%;
    margin-top: 25px;
    border: 1px solid red;
    padding: 10px 10px;
}
a {
    text-decoration: none;
}
a:hover {
    color: #3ACB4D;
    text-decoration: none;
    font-weight: bold;
}
ul {
    list-style: none;
    padding:0;
    margin:0;
}
.nav-bar {
    width: 100%;
    padding:10px 10px;
    text-align: center;
}
.nav-bar ul > li {
    display: inline-block;
    position: relative;
}
.submenu {
    display: none;
    position: absolute;
    top:100%;
    float:left;
}
.panel {
    border: solid 1px #EEE;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}
.logo {
    width: 20%;
    float: left;
}
.slidinginfo {
    width: 60%;
    float: left;
}
.contactinfo {
    width: 20%;
    float: left;
}
.body div {
    height: 50px;
}
.clearfix {
    overflow: hidden;
    clear:both;
}

JavaScript

$(document).on("click", "ul li a", function () {
    event.preventDefault();
    $(this).siblings(".submenu").toggle(300);
});