gosh i know this is easy, i have done this b4… heres everything.
its a drop down menu
SCRIPT
$("#North").hover(function () {
$("#nec").toggle();
});
$("#Mid").hover(function () {
$("#mac").toggle();
});
$("#South").hover(function () {
$("#sac").toggle();
});
HTML
<div id="ddRegions" class="ddStyle">
<div class="links" id="North"><a href="">North East Coast</a></div>
<div class="links" id="Mid"><a href="">Mid Atlantic Coast</a></div>
<div class="links" id="South"><a href="">South Atlantic Coast</a></div>
</div>
<div id="nec" class="ddStyle" style="display:none">
<div class="links"><a href="">Maine</a></div>
<div class="links"><a href="">New Hampshire</a></div>
<div class="links"><a href="">Massachusetts</a></div>
<div class="links"><a href="">Rhode Island</a></div>
<div class="links"><a href="">Connecticut</a></div>
<div class="links"><a href="">New York</a></div>
<div class="links"><a href="">New Jersey</a></div>
</div>
ALL HTML(keep in mind i use php includes so this is just the header where the menu is)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Regions - Atlantic Fishing Report</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/maxheight.js" type="text/javascript"></script>
<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/cufon-replace.js" type="text/javascript"></script>
<script src="js/Myriad_Pro_400.font.js" type="text/javascript"></script>
<script src="js/Myriad_Pro_600.font.js" type="text/javascript"></script>
<script src="js/Myriad_Pro_700.font.js" type="text/javascript"></script>
<script src="js/Myriad_Pro_italic_600.font.js" type="text/javascript"></script>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<SCRIPT LANGUAGE="JavaScript">
current_overID = "";
last_overID = "";
function item (img_name,width,height)
{
img_prefix = img_name;
this.slide_img = new Image (width,height);
this.slide_img.src = "img/map_" + img_prefix + ".gif";
}
function new_item (img_name,width,height)
{
item [img_name] = new item (img_name,width,height);
}
function mouseover (itemID)
{
current_overID = itemID;
if (current_overID != last_overID) {
document.jrcmap.src = item [current_overID].slide_img.src;
}
}
new_item ("idle",316,545);
new_item ("northeast",316,545);
new_item ("midatlantic",316,545);
new_item ("southatlantic",316,545);
</SCRIPT>
<script type="text/javascript" language="JavaScript"><!--
function HideContent(d) {
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
document.getElementById(d).style.display = "block";
}
function ReverseDisplay(d) {
if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
else { document.getElementById(d).style.display = "none"; }
}
//--></script>
<!--[if lt IE 7.]>
<script defer type="text/javascript" src="/js/pngfix.js"></script>
<![endif]-->
<script type="text/javascript">
$(document).ready(function(){
$("td #ddFish").hover(function () {
$("div #ddRegions").toggle();
});
$("div#North").hover(function () {
$("div#nec").toggle();
});
$("#Mid").hover(function () {
$("#mac").toggle();
});
$("#South").hover(function () {
$("#sac").toggle();
});
});
</script>
</head>
<body id="page1" onload="new ElementMaxHeight()">
<div id="ddRegions" class="ddStyle" style="display:none">
<div class="links" id="North"><a href="">North East Coast</a></div>
<div class="links" id="Mid"><a href="">Mid Atlantic Coast</a></div>
<div class="links" id="South"><a href="">South Atlantic Coast</a></div>
</div>
<div id="nec" class="ddStyle" style="display:none">
<div class="links"><a href="">Maine</a></div>
<div class="links"><a href="">New Hampshire</a></div>
<div class="links"><a href="">Massachusetts</a></div>
<div class="links"><a href="">Rhode Island</a></div>
<div class="links"><a href="">Connecticut</a></div>
<div class="links"><a href="">New York</a></div>
<div class="links"><a href="">New Jersey</a></div>
</div>
<div id="mac" class="ddStyle" style="display:none">
<div class="links"><a href="">Delaware</a></div>
<div class="links"><a href="">Maryland</a></div>
<div class="links"><a href="">Virginia</a></div>
<div class="links"><a href="">North Carolina</a></div>
</div>
<div id="sac" class="ddStyle" style="display:none">
<div class="links"><a href="">South Carolina</a></div>
<div class="links"><a href="">Georgia</a></div>
<div class="links"><a href="">Florida</a></div>
</div>
<div class="body-bg">
<div id="main">
<!-- header -->
<div id="header">
<div class="logo" style="width:100%"><a href="/default.php"><img src="/img/header-logo.png" border="0" width="900px" height="100px" alt="Atlantic Fishing Report" /></a> <!--<img src="/img/ad/430x70_ad1.jpg" align="bottom" class="advert" />--></div>
<div class="new-nav-box">
<table cellpadding="0" cellspacing="0" border="0" id="tablenew-nav" align="center">
<tr><td width="62px"> </td>
<td><a href="default.php" id="newhome" ><span></span></a></td>
<td id="ddFish"><a href="/fishreport.php" id="newfishingreports"><span></span></a></td>
<td><a href="/landings.php" id="newlandings"><span></span></a></td>
<td><a href="/boats.php" id="newboats"><span></span></a></td>
<td><a href="/searchGallery.php" id="newsearch"><span></span></a></td>
<td><a href="regions.php" id="ACTregions"><span></span></a></td>
<td><a href="/contact-us.php" id="newcontact"><span></span></a></td>
<td width="68px"> </td>
</tr>
</table>
</div>
</div>
<div id="content">
<div class="cont-box">
<div class="right-bot-corner">
<div class="wrapper">
<div class="col-1 maxheight">
<div class="box maxheight">
<div class="inner">
<div class="indent1">
<h4><b>Sponsors</b></h4>
<ul class="list">
<li><span class="advert"><a href="http://www.atlanticfishingreport.com"><img src="/img/ad/ad1.jpg" alt="Atlantic Fishing Report" title="Atlantic Fishing Report" width="160" height="100" /></a></span></li>
</ul>
<div style="color:#FFF"><a href="advertise-with-us.php">Interested in Advertising here? Learn more</a></div>
</div>
</div>
</div>
</div>
<div class="col-2">
<div class="indent2">
<div class="wrapper">
<h3 style="font-size:42px"> Region</h3>
<hr />
<br />
<table width="100%" align="left" cellpadding="0" cellspacing="0">
<tr>
<td valign="top"><table cellpadding="0" cellspacing="0" border="0"><tr>
<td valign="top">
<img src="/img/map_idle.gif" border="0" name="jrcmap" usemap="#jrc" />
</td></tr></table></td>
<td width="300px" valign="top" align="right">
<table cellpadding="0" cellspacing="0" width="100%" id="reports">
<tr>
<th colspan="3">
<div style="padding:0 10px 0 0"><img src="img/sponsors.png" width="36" height="20" alt="Sponsored Listing" /> icon denotes sponsors</div>
</th>
</tr>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<map name="jrc">
<area shape="poly" coords="119,50,163,212,188,236,293,124,310,51,291,5" href="/regions.php?id=1" alt="" OnMouseOver="mouseover('northeast');window.defaultStatus=''; window.status='\''; return true"..."
OnMouseOut="mouseover('idle')">
<area shape="poly" coords="147,203,207,258,152,357,109,325,6,323,60,248" href="/regions.php?id=2" alt="" OnMouseOver="mouseover('midatlantic');window.defaultStatus=''; window.status='\''; return true"..."
OnMouseOut="mouseover('idle')">
/>
<area shape="poly" coords="10,537,137,533,145,361,106,329,8,327" href="/regions.php?id=3" alt="" OnMouseOver="mouseover('southatlantic');window.defaultStatus=''; window.status='\''; return true"..."
OnMouseOut="mouseover('idle')">
/>
</map>
<br />
<div class="banner-box">
<div class="left">
<div class="inner">
<h4 style="font-size:20px">Advertise <b>NOW!</b></h4>
<p style="font-size:12px">Click the arrow for advertisement and sponsorship opportunities.</p>
</div>
</div>
<a href="/advertise-with-us.php"><img src="/img/button2.gif" alt="" /></a>
</div>
<div class="form-box">
<div class="right">
<div class="inner">
<h4 style="font-size:20px">Newsletter <b>Signup!</b></h4>
<p style="font-size:12px">Sign up to recieve our monthly newsletter</p>
</div>
</div>
<form method="post" id="form">
<input type="hidden" name="emailsignup" value="1" />
<div class="form"> <input type="text" id="text" value="Enter your e-mail please" onfocus="if(this.value=='Enter your e-mail please'){this.value=''}" onblur="if(this.value==''){this.value='Enter your e-mail please'}" name="email" />
<input name="submit" id="newsletter" type="submit" value="Sign Up!" />
</div>
</form>
<br />
</div>
</div> <br />
</div>
<div align="center" style="padding-top:10px">
<div style="color:#FFF; width:960px; font-size:10px; padding-top:10px"><!--<a style="color:#FFF" href="#">Newsletter Signup</a> | <a style="color:#FFF" href="#">About Us</a> | <a style="color:#FFF" href="#">Privacy Policy</a> | <a style="color:#FFF" href="#">Affiliates</a><span style="padding-left: 380px">-->Copyright © 2010 <a style="color:#FFF" href="#">atlanticfishingreport.com</a> All rights reserved.</span>
</div>
</div>
<script type="text/javascript"> Cufon.now(); </script>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-15581469-1");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>
Try using jQuery instead of $
One of the other javascript libraries maybe overwriting it and using it for itself (i believe prototype.js is the culprit)
If that is the case look over at the noconflic function in jquery for help with using along side other libraries
http://api.jquery.com/jQuery.noConflict/