Menu with External Div Display on Hover of Submenu Item

HTML

<body>

<div id="navigation">
<nav>

	<ul class="top-level">
	  <li><a href="#">Top-level Item</a>
			<div class="sub-level">
				<div><a href="#">Sub-level Item</a></div>
				<div><a href="#">Sub-level Item</a></div>
				<li><a href="#">Sub-level Item</a></li>
di		</li>

		<li><a href="#">Top-level Item</a>
			<ul class="sub-level">
				<li><a href="#">Sub-level Item</a>
				<li><a href="#">Sub-level Item</a></li>
				<li><a href="#">Sub-level Item</a></li>
				<li><a href="#">Sub-level Item</a></li>
           </ul>
       </li>	
</nav>
</div>



<div id="info1">
	<center><img src="http://nuclearpixel.com/content/icons/2010-02-09_stellar_icons_from_space_from_2005/earth_128.png" border="0"></center><br><center><table border="4" cellpadding="6">
<tr>
<td><br>I want this div to display on the right side of the screen once the mouse has hovered over a sub-level menu item.<br><br>
</td>
</tr>

</table></center>
</div>





</body>

CSS

body { background-image: url(image.jpg); }

#navigation 
{
    width: 200px;
    font-size: 0.75em;
}

#navigation ul 
{
	margin: 0px;
	padding: 0px;
}
	
ul.top-level { background: gray; }
		
#navigation li { list-style: none; }
 
ul.top-level li 
{
    border-bottom: #fff solid;
    border-top: #fff solid;
    border-width: 1px;
}

#navigation a 
{
	color: #fff;
	cursor: pointer;
	display:block;
	height:25px;
	line-height: 25px;
	text-indent: 10px;					
	text-decoration:none;
	width:100%;
}
	        
#navigation li:hover 
{
	background: #f90;
	position: relative;
}

ul.sub-level { display: none; }
        
li:hover .sub-level 
{
    background: #999;
   	border: #fff solid;
    border-width: 1px;
    display: block;
    position: absolute;
    left: 200px;
    top: -1px;
}
 
ul.sub-level li 
{
	border: none;
	float:left;
	width:200px;   
}

#navigation .sub-level { background: gray; }
		
#navigation .sub-level .sub-level { background: gray; }
						
#info1
{
	font-family: "Verdana,Arial,Helvetica";
	size: -1;
    
    display: -moz-inline-stack;
	display: inline-block;
	vertical-align: middle;
	zoom: 1;
	*display: inline;
    
	display: none;
    
    position: absolute;
    
    
}

JavaScript

$('.top-level li .sub-level li').on('mouseover', function() {
    // Position #info1 off to the side of the .sub-level    
    $('#info1').css({ 
        'top': $(this).parent('.sub-level').position().top,
        'left': $(this).parent('.sub-level').position().left + $(this).parent('.sub-level').outerWidth(),
    });
    
    $('#info1').show();
}).on('mouseleave', function() {
    $('#info1').hide();
});