JSFiddle - React, Tailwind, and code Playground

HTML

<nav id="na">
						<ul>
							<li id="na1" ><a href="#"> Details &nbsp;&nbsp;&nbsp;<img src="img/arrow2.gif"/></a>
								<ul id="content1" >
									<table>
										<tr><td>
										<li><a href="#">123</a></li>
										<li><a href="#">65789</a></li>
										<li><a href="#">123456</a></li>									
										</td>	
										
										<td>  	
											<img src="img/img1.jpg" style="width:200px; height:175px;" />											
										</td>
										<td></td><td></td><td></td>
										</tr>
										<tr></tr><tr></tr><tr></tr><tr></tr><tr></tr>
									</table>
								</ul>
							</li>
							<li id="na2"><a href="#"> Accounting&nbsp;&nbsp;&nbsp;<img src="img/arrow2.gif"/></a>
								<ul id="content2">
									<table>
									<tr><td>
									
									<li><a href="#"> Cut Period</a></li>
										<li><a href="#"> Activity Report</a></li>
										<li> <a href="#"> Allocation</a></li>
										<li> <a href="#"> Report</a></li>
										<li> <a href="#">Comparison</a></li>
										<li> <a href="#"> Days Report</a></li>			
										</td>					
									</tr>
									</table>
								</ul>
							</li>
			
						</ul>
					</nav>

CSS

/* menu 
----------------------------*/
#na{
	line-height:10px;
    font-size:13px;
    font-family:Arial;
    font-weight:bold; 
    color:black;
    text-decoration:none;    
    display:block;
    position:static;
    background-image:none;
    padding:;
	margin: -13px 0px 0px 0px ; 
	letter-spacing:normal;	
}
/* menu body
----------------------------*/
nav {
	text-align: center;
	color:#003399;
	font-weight:bold;
	padding: 0px 0px 0px 0px;
}

nav ul ul {
	display: none;
}


nav ul li:hover > ul 
{	
	display: block;
}

nav ul 
{
	background:#f79621;
	background: #f79621; /* Old browsers */
	background: -moz-linear-gradient(top, #f79621 2%, #f9c667 52%, #f9c667 93%, #f9c667 97%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,#f79621), color-stop(52%,#f9c667), color-stop(93%,#f9c667), color-stop(97%,#f9c667)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #f79621 2%,#f9c667 52%,#f9c667 93%,#f9c667 97%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #f79621 2%,#f9c667 52%,#f9c667 93%,#f9c667 97%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #f79621 2%,#f9c667 52%,#f9c667 93%,#f9c667 97%); /* IE10+ */
	background: linear-gradient(to bottom, #f79621 2%,#f9c667 52%,#f9c667 93%,#f9c667 97%); /* W3C */
	
	box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
	padding: 0px 0px 0px 0px;	
	border-radius: 2px;  
	list-style: none;
	position: relative;
	display: inline-table;
	effect : slide;
	white-space:nowrap;
	
/*	font-weight:bold; 	*/
}
nav ul:after 
{
	content: ""; clear: both; display: block;
}

	nav ul li {
		float: left;
	}
		nav ul li:hover {
			background: white;
		}
			nav ul li:hover a {
				color: black;
			}
		
		nav ul li a {
			display: block; padding: 12px 24px;					/* Height */
			color: black; text-decoration: none;	
			}
	
	nav ul ul {
		background: #fcf7f7;  		/* Sub menu Background colour */
		position: absolute; top: 100%;
		padding: 15px 10px 15px...

JavaScript

function mainmenu(){
jQuery(" #na1").hover(function(){
//alert("hai-2");
jQuery(this).find('#content1').slideDown("fast");
},function(){
jQuery(this).find('#content1').slideUp("fast");
});
}

$(document).ready(function()
{
mainmenu();
});