JSFiddle - React, Tailwind, and code Playground

HTML

<title>Admin Control Panel - TBB Rocking Crew</title>
</head>

<body>
<div id="dHeader">
  <header> </header>
</div>
<div id="dBody">
  <aside>
    <article class="asideBoxTitle"> <a href="#"> <img src="img/home.jpg" class="ico"/> <span class="asideTitle">Dashboard</span> </a> </article>
    <article class="asideBoxTitle"> <a href="#"> <img src="img/world.png" class="ico"/>
      <ul id="menu">
        <li id="MainMenu" class="asideTitle">WorldWide</li>
        <li class="sub">Chapterz</li>

        <li class="sub">Memberz</li>
      </ul>
      </a> </article> 
      <article class="asideBoxTitle"> <a href="#"> <img src="img/home.jpg" class="ico"/> <span class="asideTitle">Dashboard</span> </a> </article>
  </aside>
  <!-- end aside-->
  <section> </section>
</div>

CSS

@charset "utf-8";
/* CSS Document */
body{
    margin:0px;
}
aside{
    width:240px;
    background:#f5f5f5;
    position:absolute;
    top: 58px;
    bottom:0;
    border-right-width:1px;
    border-right-style:solid;
    border-right-color:#e2e2e2;

}
.asideBoxTitle{
    min-height:40px;
    line-height:40px;
    border-bottom-width:1px;
    border-bottom-style:solid;
    border-bottom-color:#e2e2e2;
    width:100%;
}
.asideBoxTitle a{
    text-decoration:none;
}
.asideTitle{
    color:#000;
    text-decoration:none;
    margin-left:20px;   
    margin-top:-10px;
    vertical-align:middle;

}
.asideBoxTitle ul{
    display:inline-table;
    list-style-type: none;
    margin: 0;
    padding: 0;
    cursor:pointer;
}

.sub{
    display:none;
    color:#000;
    text-decoration:none;
    margin-left:20px;   
    vertical-align:middle;
}
.sub:after{
    border-bottom-width:1px;
    border-bottom-style:solid;
    border-bottom-color:#e2e2e2;
    width:100%;
}
.ico{
    vertical-align:text-top;
    margin-left:10px;   
}
#dHeader{
    background:#20638f;
    height:58px;
    width:100%;
}

JavaScript

$(function() {
    $('#MainMenu').click(function(){
      $('.sub').slideToggle();
    });
});