JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div id="wrapper">
    <div id="header">
        <img src="/images/header/logo.png" alt="" border="0" title=" Home" width="262" height="104">
    </div>
    <div id="navigation">
<a id="menu1link" href="page1.php" style="color:#000000;text-decoration:none;" onmouseover="this.style.textDecoration='underline'" onmouseout="this.style.textDecoration='none'">Category 1</a>
        <img src="/images/clear.gif" alt="" width="20" height="1">
<div class="dropmenu" id ="dropmenu1">
    Drop Menu 1
</div>
<a id="menu2link" href="page2.php" style="color:#000000;text-decoration:none;" onmouseover="this.style.textDecoration='underline'" onmouseout="this.style.textDecoration='none'">Category 2</a>
        <img src="/images/clear.gif" alt="" width="20" height="1">
<div class="dropmenu" id ="dropmenu2">
    Drop Menu 2
</div>
        <a id="menu3link" href="page3.php" style="color:#000000;text-decoration:none;" onmouseover="this.style.textDecoration='underline'" onmouseout="this.style.textDecoration='none'">Category 3</a>
        <img src="/images/clear.gif" alt="" width="20" height="1">
<div class="dropmenu" id ="dropmenu3">
    Drop Menu 3
</div>
        <hr>
    </div>
    <div id="container">
        <div id="side-a">
            SIDE BAR<P></P><P></P>x<P></P>
        </div>
        <div id="middle-ab">&nbsp;
        </div>
        <div id="side-b">
            CONTENT
        </div>
    </div>
    <div id="footer">
        FOOTER
    </div>
</div>

CSS

body {
    background: #000000;
    margin:0
}
#wrapper {
    text-align: left;
    margin: 0px auto;
    padding: 0px;
    border:0;
    width: 980px;
    background: #FFFFFF;
}

#header {
    margin: 15px 0 0 0;
    background: #000000;
}
#navigation {
    margin: 5px 0 5px 0;
    font-family: arial, sans-serif;
    font-size:15px;
    font-weight:bold;
    background: #FFFFFF;
    text-align:center;
}
#side-a {
    float: left;
    width: 300px;
    background: #cccccc;
}

#middle-ab { 
    width: 10px;
    float: left;
    background: #000000;
}

#side-b { 
    margin: 0;
    float: left;
    width: 670px;
    background: #eeeeee;
}

#footer {
    clear: both;
    background: #dddddd;
}


.dropmenu{
display: none;
z-index:3;
 position: absolute;
 padding: 20px;
 margin: 0;
 left: -1px;
 top: 80px;
 width: 940px;
height:100px;background-color:#336692
}

JavaScript

$(document).ready(function(){
    $("#menu1link,#dropmenu1").mouseover(function() {
        var p = $("#menu1link");
        var position = p.position();
        $('#dropmenu1').css('left', 150);
        $('#dropmenu1').css('top', position.top + 17);
        $('#dropmenu1').stop().fadeIn("fast");
    }).mouseout(function(){
        $('#dropmenu1').stop().fadeOut("fast");
    });
    
    
    $("#menu2link,#dropmenu2").mouseover(function() {
        var p = $("#menu2link");
        var position = p.position();
        $('#dropmenu2').css('left', 150);
        $('#dropmenu2').css('top', position.top + 17);
        $('#dropmenu2').stop().fadeIn("fast");
    }).mouseout(function(){
        $('#dropmenu2').stop().fadeOut("fast");
    });
    
    
    $("#menu3link,#dropmenu3").mouseover(function() {
        var p = $("#menu3link");
        var position = p.position();
        $('#dropmenu3').css('left', 150);
        $('#dropmenu3').css('top', position.top + 17);
        $('#dropmenu3').stop().fadeIn("fast");
    }).mouseout(function(){
        $('#dropmenu3').stop().fadeOut("fast");
    });
});