I am trying to show and hide div.
when user click login .login-divneed show.
when user mouseout or click outside of the login div. .login-divneed to hide
here is my code
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” />
<title>Untitled Document</title>
<script type=“text/javascript”>
function showdiv(){
document.getElementById(‘logindiv’).style.visibility = “visible”
}
function hidediv(){
document.getElementById(‘logindiv’).style.visibility = “hidden”
}
</script>
<style type=“text/css”>
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px; font-family:Arial, Helvetica, sans-serif;
}
#header{ height:100px; width:900px; background:#f2f2f2; margin:0 auto;}
.login{ float:right; padding:40px 40px 0 0; display:block; position:relative; }
.login a{ display:block; padding:5px 15px; position:relative; background:#fff; z-index:999;
}
.login a:hover{ display:block; padding:5px 15px; position:relative; background:#fff; z-index:999;
border: solid #000;
border-width: 1px 1px 0px 1px;
}
.login-div{ margin-top:-1px; background:#fff; width:250px; border:1px solid #000; padding:15px; height:200px; position:absolute; top:100%; left:-210px; visibility:hidden;
}
</style>
</head>
<body>
<div id=“header”>
<div class=“login”>
<a href="#" onclick=“showdiv();”>Login</a>
<div class=“login-div” id=“logindiv”>sfs</div>
</div>
</div>
</body>
</html>
