JSFiddle - React, Tailwind, and code Playground
HTML
<TABLE bgcolor="#ffffff" cellpadding="0" cellspacing="0" margin="0">
<TR>
<TD>
<TABLE width="742" border="0" cellpadding="0" cellspacing="0" margin="0">
<TR>
<TD width="742"><img src="http://www.eromadayspa.com/images/header_mainimage_xmas2.jpg">
</TD>
</TR>
</TABLE>
<div id="container">
<ul id="nav">
<li><a href="">Link</a></li>
<li><a href="">Link</a>
<ul>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
</ul>
</li>
<li><a href="">Link</a>
<ul>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
</ul>
</li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
</ul>
</div>
<br><BR><br>
</td></tr></table>
CSS
img {
border-spacing: 0;
height: 100%;
display: block;
}
#container {
width: 742px;
margin:0;
padding: 0;
font: 100% Helvetica, Arial sans-serif;
font-size:12px;
font-style:italic;
font-weight:bold;
}
ul#nav {
line-height: 25px;
padding: 0;
margin:0;
}
ul#nav li {
float: left;
position: relative;
list-style: none;
background: #006666;
}
ul#nav li a {
width: 146.4px;
display: block;
border: 1px solid #000;
text-align: center;
text-decoration:none;
color: #fff;
height:25px;
}
ul#nav li:hover {background: #990000;}
ul#nav ul {
position: absolute;
padding: 0;
left: 0;
top: 100%;
width:100%;
visibility: hidden;
}
ul#nav li:hover ul {visibility: visible;}
ul#nav a:hover {color: yellow;}
ul#nav ul li {float:none; width:100%;}
ul#nav ul li a {
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
text-align:left;
padding-left:8px;
height:26px;
display:block;
}
header, nav, section, article, aside, footer, hgroup {
display: block;
}