Menu Fade
Menu Fade
Hello all, noob here.
I have a menu that I need to dropdown and fade in on mouseover. I am lost on getting everything to tie in to the CSS, at least I think that's the problem. The other problem is having a lot of "white" space at the bottom of the page, I assume I'm not using display or visibility correctly.
Here is the code (my apologies for the length), any help would be appreciated! Thanks in advance!
$(document).ready(function() {
$(".aboutus").mouseover(function(e) {
e.preventDefault();
$("#link").fadeIn(250);
$(".aboutus").toggleClass("menu-open");
});
$("#link").mouseup(function() {
return false
});
$(document).mouseup(function(e) {
if($(e.target).parent("a.aboutus").length==0) {
$(".aboutus").removeClass("menu-open");
$("#link").hide();
}
});
});
CSS
--------------------------------------------------------------------------------------
#link{
position: absolute;
left: 0;
top: 0;
visibility: hidden;
font: normal 11px Verdana;
z-index: 100;
background: #000000;
width: 255px;
border: 5px solid #000000;
}
#links ul{
margin: 0;
padding: 0;
list-style-type: none;
}
#link ul li a{
display: block;
text-indent: 3px;
padding: 4px;
text-decoration: none;
text-indent: 5px;
color: #CCC;
}
#link a:hover{
text-decoration: underline;
}
HTML
-------------------------------------------------------------------------------------------------------------
<a href="#" class="aboutus" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('nav1','','images/nav1-aboutus-rollover.jpg',1)" ><img src="images/nav1-aboutus.jpg" name="nav1" width="89" height="26" border="0"></a>
<div id="link" class="aboutus">
<ul>
<li style="border-bottom: 1px solid #333;"><a href="#">Company Description</a></li>
<li style="border-bottom: 1px solid #333;"><a href="#">Vision/Mission</a></li>
<li style="border-bottom: 1px solid #333;"><a href="#">History</a></li>
<li style="border-bottom: 1px solid #333;"><a href="#">Locations</a></li>
<li style="border-bottom: 1px solid #333;"><a href="#">Visitor Info</a></li>
<li style="border-bottom: 1px solid #333;"><a href="#">Virtual Tours</a></li>
<li><a href="#">Employee Login</a></li>
<li style="border-top: 1px solid #333;"><a href="#">Community Involvement </a></li>
</ul>
</div>