JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
<ul id="menu">
   
        <li><a href="main.php">Home</a></li>
<li class="menu_right"><a href="profile.php" class="drop">My Check List</a>
   
  <div class="dropdown_1column align_right">
           
                                <div class="col_1">
                           
                                        <ul class="simple">
                                                <li><a href="add-goal.php">Add a Goal</a></li>
                                                <li><a href="profile.php">My Profile</a></li>
                                                <li><a href="edit-profile.php">Edit Profile</a></li>
                                                <li><a href="settings.php">Account Settings</a></li>
                                        </ul>  
                                        
                                </div>
                           
  </div>
           
  </li>
   
   <li class="menu_right"><a href="activity.php">Member Activity</a></li>
<li class="menu_right"><a href="about.php" class="drop">About</a>
   
  <div class="dropdown_1column align_right">
           
                                <div class="col_1">
                           
                                        <ul class="simple">
                                                <li><a href="about.php">About Us</a></li>
                                                <li><a href="contact.php">Contact Us</a></li>
                                                <li><a href="faq.php">FAQ</a></li>
                                                <li><a href="terms.php">Terms & Conditions</a></li>
                                                <li><a href="privacy.php">Privacy Statement</a></li>
                                        </ul>
                  </div>
</div>
   </li>
</ul>
<table width="100%" border="0" cellspacing="0" cellpadding="2">
  <tr>
        <td><div id="contentbox">content</div></td>
        <td><div...

CSS

ul, li {
font-size:12px;
font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
line-height:21px;
text-align:left;
}
#container{
margin:0 auto;
    border: 1px solid green;
width:990px;
}
#menu {
z-index:1;
list-style:none;
width:940px;
margin:30px auto 0px auto;
height:43px;
padding:0px 20px 0px 20px;
/* Rounded Corners */

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background: #000000;

/* Borders */

border: 2px solid #3a3a3a;
-moz-box-shadow:inset 3px 3px 4px #000000;
-webkit-box-shadow:inset 3px 3px 4px #000000;
box-shadow:inset 3px 3px 4px #000000;
}
#menu li {
float:left;
display:block;
text-align:center;
position:relative;
padding: 4px 10px 4px 10px;
margin-right:30px;
margin-top:7px;
border:none;
}
#menu li:hover {
border: 1px solid #3a3a3a;
padding: 4px 9px 4px 9px;
background: #000000;

/* Rounded corners */

-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
}
#menu li a {
font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color: #bb7f2a;
display:block;
outline:0;
text-decoration:none;
}
#menu li:hover a {
color:#bb7f2a;
text-decoration:underline;
}
#menu li .drop {
padding-right:21px;
background:url("../images/drop.png") no-repeat right 8px;
}
#menu li:hover .drop {
background:url("../images/drop.png") no-repeat right 7px;
}
.dropdown_1column
{
margin:4px auto;
float:left;
position:absolute;
left:-999em; /* Hides the drop down */
text-align:left;
padding:10px 5px 10px 5px;
border:1px solid #3a3a3a;
border-top:none;

/* Gradient background */
background:#000000;
/* Rounded Corners */
-moz-border-radius: 0px 5px 5px 5px;
-webkit-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px;
}
.dropdown_1column {
width: 140px;
}
#menu li:hover .dropdown_1column {
left:-1px;
top:auto;
}
.col_1 {
width:130px;
display:inline;
float: left;
position: relative;
margin-left:...