JSFiddle - React, Tailwind, and code Playground

by Academia

HTML

<body>
    <div id="wrapper">
        <header>
            <div class="logo"><a href="index.html"><img src="http://i.imgur.com/IL1agD5.png"/></a></div>
            <div class="chapter"><a><img src="http://i.imgur.com/RPIvgdD.png"/></a></div>
        </header>
        <nav>
            <ul class="menu">
                <li><a href="#">Home</a>
                
                <li class="dropdown"><a href="#">About ▾</a>
                    <ul class = "sub-menu">
                        <li><a href="#">History</a>
                        </li>
                        <li><a href="#">Brothers</a>
                        </li>
                    </ul>
                <li class = "dropdown"><a href="#">Philanthropy ▾</a>
                    <ul class="sub-menu">
                        <li><a href="#">Kovacs Color Run</a>
                        </li>
                        <li><a href="#">Greek God</a>
                        </li>
                        <li><a href="#">Boys & Girls Club</a>
                        </li>
                    </ul>
                
                <li><a href="#">Membership</a>
                <li><a href="#">Photos</a>
                <li><a href="#">Contact</a>
                
            </ul>
        </nav>

CSS

* {
    -webkit-box-sizing: border-box;
    /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;
    /* Firefox, other Gecko */
    box-sizing: border-box;
    /* Opera/IE 8+ */
}

#wrapper {
    min-width:900px;
    margin:0 auto;
}
body {
    margin:0px;
    padding:0px;
}

header {
    height:100px;
    width:100%;
    background:black;
    margin:0 auto;

}
.logo{
    padding-left:10px;
    float:left;
    padding-top:5px;
}

.chapter {
    float:right;
    padding-top:15px;
    padding-right:10px;
}


.menu{
    margin:0 auto;
    padding:0 ;
    text-align:center;
    clear:both
}

ul.menu {
    background-image: -o-linear-gradient(bottom, #ACB5B5 0%, #E2F0EA 100%);
    background-image: -moz-linear-gradient(bottom, #ACB5B5 0%, #E2F0EA 100%);
    background-image: -webkit-linear-gradient(bottom, #ACB5B5 0%, #E2F0EA 100%);
    background-image: -ms-linear-gradient(bottom, #ACB5B5 0%, #E2F0EA 100%);
    background-image: linear-gradient(to bottom, #ACB5B5 0%, #E2F0EA 100%);
    height: 40px;
    width: 100%;
    border-left:solid 1px #22674A;
    white-space: nowrap;
    text-align:center;
}

ul.menu > li {
    position: relative;
    display:inline-block;
    list-style:none;
    text-align:center;
    width:16.66%;
    border-style:1px #22674A;
}
ul.menu li:first-child a {
    border-left:none;
}
ul.menu ul li a {
    border:none;
}
ul.menu ul {
    background-image: -o-linear-gradient(bottom, #E2F0EA 0%, #ACB5B5 100% );
    background-image: -moz-linear-gradient(bottom, #E2F0EA 0%, #ACB5B5 100% );
    background-image: -webkit-linear-gradient(bottom, #E2F0EA 0%, #ACB5B5 100%);
    background-image: -ms-linear-gradient(bottom, #E2F0EA 0%, #ACB5B5 100%);
    background-image: linear-gradient(to bottom, #E2F0EA 0%, #ACB5B5 100% );
    position: absolute;
    padding:0;
    border-left:none;
    border:solid 1px #22674A;
    width:100%;
    text-align:center;

}
ul.menu a {
    cursor: pointer;
    display: block;
    color: #22674A;
   ...

JavaScript

$(document).ready(function(){
  $(".dropdown").click(function(){
        $ul = $(this).find(".sub-menu");
        $ul.toggle(1000);
  });
});