below the code and it,s css are:
CSS>>
body{
background-color:white;
}
a{
text-decoration:none;
}
a{
color:gray;
}
a:hover{
color:brown;
text-decoration:underline;
}
.wrapper {
position:relative; height:25px;
}
#main {
position: relative;
margin-left: 30px;
}
#main a {
display: block;
width: 240px;
}
#main ul{
position:absolute;
list-style-type:none;
padding-top: 5px;
text-align:center;
}
#main li{
float: left;
position: relative;
padding: 3px 0;
text-align: center;
}
#main ul.sub {
display: none;
position: absolute;
top: 20px;
left: -10px;
padding: 10px;
z-index: 90;
}
#main li:hover ul.sub {
display: block;
}
HTML>>
<html>
<head>
<title> Msz
</title>
<link rel="stylesheet" type="text/css" href="drop.css">
<script src="jquery-1.2.6.pack.js" type="text/javascript"></script>
</head>
<body background="grl.jpg" height="768%" width="1024%">
<img src="2.PNG" height="20%" width="100%">
<ul id="main">
<li><a href="msz.html">HOME</a>
</li>
</ul>
<ul id="main">
<li><a href="#">Information</a>
<ul class="sub">
<li><a href="pages\\softwareinformation.html" target="_blank">Software List</a></li>
</ul>
</li>
</ul>
<ul id="main">
<li><a href="#">ABOUT</a>
<ul class="sub">
<li><a href="pages\\author.html" target="_blank">Author</a></li>
</ul>
</li>
</ul>
<script type="text/javascript">
$(document).ready(function(){
$('.sub').hide();
var mnuTimeout = null;
$('#main').mouseover(function(){
clearTimeout(mnuTimeout);
mnuTimeout = setTimeout(function(){$('.sub').slideDown(200);},50);
});
$('#main').mouseout(function(){
clearTimeout(mnuTimeout);
mnuTimeout = setTimeout(function(){$('sub').slideUp(200);},50);
});
});
</script>
</body>
</html>
the problem is that when i mouseover on the home tab all other hiden content,s are shown and, doesnot hide when i mouseout plz check and try to solve it…