asked on

mouseover popup

i am developing a mouseover flyout popup.
it has some issues.
* once i move the mouse from list item "next" on to the flyout, it should not close! now it closes.
* need to align the top of the popup in parallel to the list item "next".
* clicking on X should close the popup.

pl check.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script>
function mon() {
	document.getElementById('details').style.display = 'block';
}
function moff() {
	document.getElementById('details').style.display = 'none';
}
</script>
<style>
.listview {
	float:left;
	width:150px;
}
.listview ul
{
	margin: 5px 0 5px 5px;
	padding: 0;
	list-style-type: none;
	list-style-image: none;
	border:1px solid gray;
	width:100%;
}
.listview ul li
{
	line-height: 14px;
	margin: 5px 0 5px 10px;
	padding: 0;
	font: 12px arial;
}
.listOver 
{
	border:1px solid gray;
	color: blue;
	padding:5px;
}
.listNone
{
	border:none;
	color: black;
}
.details {
	display:none;
	border:1px solid gray;
	float:left;
	margin:0 0 0 0;
	width:600px;
	background-color:#CCCC99;
	padding:10px;
}
</style>
</head>
<body>  
<div class="listview">
	<ul>
		<li>fasdfasdf</li>
		<li>fasdfasdf</li>
		<li>fasdfasdf</li>
		<li>fasdfasdf</li>
		<li>fasdfasdf</li>
		<li onmouseover="mon();this.className='listOver';" onmouseout="moff();this.className='listNone';">Next</li>
	</ul>
</div>
	<div id="details" class="details">
			<div style="width:100%;height:500px;background:#FFFFCC">
				<div style="float:right;width:20px" onclick="self.close()">X</div>
			</div>
	</div>	
</body>
</html>

Open in new window

SOLUTION