I’m trying to get the menu to show up and it won’t.
Here is the HTML code:<
head>
<link rel=“shortcut icon” type=“image/x-icon” href=“favicon.ico” />
<link rel=“icon” type=“image/x-icon” href=“favicon.ico” />
<meta http-equiv=“Content-Type” content=“text/html; charset=iso-8859-1” />
<title>Alaska Fur Gallery</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script language="JavaScript" src="js.js"></script>
<link rel="stylesheet" type="text/css" href="activemenu.css" />
<script src="jquery-activemenu.js" type="text/javascript"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.1.js"></script>
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.1.css" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
$("a#fancybox").fancybox({
'titleShow' : false,
type:'image'
});
//show the footer
$("#footer").css("visibility","visible");
//initialize activeMenu
initMenu();
});
</script>
</head>
<body>
<div id=“container”>
<div id="header">
<a href="index.html"><div id="logolink">Alaska Fur Gallery</div></a>
<div id="answer">We're Here to Answer Your Questions. Call Us Today at 334-277-7610</div>
<div id="underlinemenu" class="ulmhead">
<ul>
<li><a href="index.html" style="border:0;">Home</a></li>
<li><a href="content2e96.html?id=431503">About</a></li>
<li><a href="content9bf1.html?id=431504">Services</a></li>
<li><a href="find_location.html">Locations</a></li>
<li><a href="ct.html">Contact Us</a></li>
</ul>
</div>
<div class="clear"></div>
<div id="topmenu">
<ul id="activeMenu">
<li style="top: 0; left:0px"><a href="shopa146.html?action=cat&catID=20529" id="furs">Furs</a></li>
<li style="top: 0; left:66px"><a href="shop52df.html?action=cat&catID=20541" id="leather">Leather & Fur</a></li>
<li style="top: 0; left:210px"><a href="shop9e9f.html?action=cat&catID=20575" id="cashmere">Cashmere & Fur</a></li>
<li style="top: 0; left:374px"><a href="shop80c4.html?action=cat&catID=21239" id="outerwear">Outerwear</a></li>
<li style="top: 0; left:493px"><a href="shop0376.html?action=cat&catID=20544" id="plus">Plus Sizes</a></li>
<li style="top: 0; left:604px"><a href="shop2060.html?action=cat&catID=20580" id="accessories">Accessories</a></li>
</ul>
</div><!-- topmenu -->
</div><!-- header -->
<!--submenu divs-->
<div id="furs_submenu">
<ul class="dropdown" style="width:130px; float:left; margin:0 30px 0 0;">
<span>Women's Furs</span>
<li><a href="shopde5e.html?action=cat&catID=20572">Mink</a></li>
<li><a href="shop2705.html?action=cat&catID=20574">Sable</a></li>
<li><a href="shop5c0d.html?action=cat&catID=20570">Chinchilla</a></li>
<li><a href="shopdfa7.html?action=cat&catID=20568">Beaver</a></li>
<li><a href="shop04fa.html?action=cat&catID=20571">Lynx</a></li>
<li><a href="shop65dc.html?action=cat&catID=20569">Bobcat</a></li>
<li><a href="shopc9fc.html?action=cat&catID=20622">Coyote</a></li>
<li><a href="shop65f8.html?action=cat&catID=20539">Fox</a></li>
<li><a href="shop3276.html?action=cat&catID=20573">Rabbit</a></li>
</ul>
<ul class="dropdown" style="width:140px; float:left;">
<span>Men's Furs</span>
<li><a href="shop2ef6.html?action=cat&catID=20531">Mink</a></li>
<li><a href="errorfe10.html?action=cat&catID=20532">Sable</a></li>
<li><a href="errorfe10.html?action=cat&catID=20533">Chinchilla</a></li>
<li><a href="errorfe10.html?action=cat&catID=20534">Beaver</a></li>
<li><a href="errorfe10.html?action=cat&catID=20535">Lynx</a></li>
<li><a href="errorfe10.html?action=cat&catID=20536">Bobcat</a></li>
<li><a href="shopfc5b.html?action=cat&catID=20618">Coyote</a></li>
<li><a href="shop88e4.html?action=cat&catID=20537">Fox</a></li>
<li><a href="errorfe10.html?action=cat&catID=20540">Rabbit</a></li>
</ul>
</div>
<div id="leather_submenu">
<ul class="dropdown">
<li><a href="shop973d.html?action=cat&catID=20542">Women's Leather & Fur</a></li>
<li><a href="shop4cc6.html?action=cat&catID=20543" style="border:0;">Men's Leather & Fur</a></li>
</ul>
</div>
<div id="cashmere_submenu">
<ul class="dropdown">
<li><a href="shop3f01.html?action=cat&catID=20576">Coats</a></li>
<li><a href="shopd4d8.html?action=cat&catID=20577">Strollers</a></li>
<li><a href="shop7899.html?action=cat&catID=20578">Jackets</a></li>
<li><a href="shopcba4.html?action=cat&catID=20579" style="border:0;">Capes</a></li>
</ul>
</div>
<div id="plus_submenu">
<ul class="dropdown" style="width:130px; float:left; margin:0 30px 16px 0;">
<span>Women's Furs</span>
<li><a href="shop2530.html?action=cat&catID=20564">Mink</a></li>
<li><a href="shop807e.html?action=cat&catID=20566">Sable</a></li>
<li><a href="shopbc8f.html?action=cat&catID=20557">Chinchilla</a></li>
<li><a href="shopcb16.html?action=cat&catID=20553">Beaver</a></li>
<li><a href="shop3cb8.html?action=cat&catID=20561">Lynx</a></li>
<li><a href="shopb6e3.html?action=cat&catID=20555">Bobcat</a></li>
<li><a href="shop1e6c.html?action=cat&catID=20621">Coyote</a></li>
<li><a href="shopc08b.html?action=cat&catID=20559">Fox</a></li>
<li><a href="shop0495.html?action=cat&catID=20562">Rabbit</a></li>
</ul>
<ul class="dropdown" style="width:140px; float:left;">
<span>Men's Furs</span>
<li><a href="shop9b23.html?action=cat&catID=20565">Mink</a></li>
<li><a href="shop10dc.html?action=cat&catID=20567">Sable</a></li>
<li><a href="shop8154.html?action=cat&catID=20556">Chinchilla</a></li>
<li><a href="shop0b63.html?action=cat&catID=20551">Beaver</a></li>
<li><a href="shopa40f.html?action=cat&catID=20560">Lynx</a></li>
<li><a href="shopd843.html?action=cat&catID=20554">Bobcat</a></li>
<li><a href="shopa2c0.html?action=cat&catID=20620">Coyote</a></li>
<li><a href="shopb0b2.html?action=cat&catID=20558">Fox</a></li>
<li><a href="shopd3b0.html?action=cat&catID=20563">Rabbit</a></li>
</ul>
<div class="clear"></div>
<ul class="dropdown" style="width:130px; float:left; margin:0 30px 10px 0;">
<span>Leather & Fur</span>
<li><a href="shop91d6.html?action=cat&catID=20549">Women's Leather & Fur</a></li>
<li><a href="shop8605.html?action=cat&catID=20548">Men's Leather & Fur</a></li>
</ul>
<ul class="dropdown" style="width:140px; float:left; margin:-6px 0 0 0;">
<li><a href="shope478.html?action=cat&catID=20550" style="border:0;"><strong>Cashmere & Fur</strong></a></li>
</ul>
</div>
<div id="accessories_submenu">
<ul class="dropdown">
<li><a href="shop2f26.html?action=cat&catID=20581">Fur Hats</a></li>
<li><a href="shop9989.html?action=cat&catID=20582">Fur Headbands</a></li>
<li><a href="shop935f.html?action=cat&catID=20583">Fur Earmuffs</a></li>
<li><a href="shopd2bf.html?action=cat&catID=20584">Gloves with Fur</a></li>
<li><a href="shop2c08.html?action=cat&catID=20585">Fur Boot Toppers</a></li>
<li><a href="shop9f4f.html?action=cat&catID=20586">Fur Scarves & Flings</a></li>
<li><a href="shop3d06.html?action=cat&catID=20587">Fur Blankets</a></li>
<li><a href="shop4bf4.html?action=cat&catID=20588">Fur Handbags</a></li>
<li><a href="shop611a.html?action=cat&catID=20589" style="border:0;">Mink Teddy Bears</a></li>
</ul>
</div>
Here is the javascript:
/*
jQuery ActiveMenu v1.0
Author: Miguel Sanchez
12/2009
*/
var timeouts = ; //for hiding the menu purposes
function initMenu(){
var offclass;
var menuAnchor;
$(“#activeMenu”).find(“li”).each(function() {
//get a reference to the anchor inside the li
menuAnchor = $(this).children(":first");
//get the name of the offclass
offclass = $(menuAnchor).attr("id")+"_off";
//assign off class to item
$(menuAnchor).addClass(offclass);
//assign hover event handler to main menu
$(menuAnchor).hover(
function (event) {
submenu_show(event.target);
},
function (event) {
submenu_hide(event.target);
}
);
});
//assign hover events to submenu
$("div [id$=_submenu]").hover(
function (event) {
submenu_over(event.target);
},
function (event) {
submenu_out(event.target);
}
);
}
function submenu_show(caller){
//hide all the submenus
$(“div [id$=_submenu]”).hide();
//get the id of the main menu item
var mainMenuItemId = $(caller).attr("id")
//get the "on" class name
var onclass = mainMenuItemId+"_on";
//get the "off" class name
var offclass = mainMenuItemId+"_off";
//remove off class to item
$(caller).removeClass(offclass);
//assign on class to item
$(caller).addClass(onclass);
// get the id of the submenu
var targetSubMenuId = mainMenuItemId+"_submenu";
//show the submenu
$("#"+targetSubMenuId).slideDown("fast");
}
function submenu_hide(caller){
//get the id of the main menu item
var mainMenuItemId = $(caller).attr("id");
//get the "on" class name
var onclass = mainMenuItemId+"_on";
//get the "off" class name
var offclass = mainMenuItemId+"_off";
//remove on class to item
$(caller).removeClass(onclass);
//assign off class to item
$(caller).addClass(offclass);
timeouts[mainMenuItemId] = setTimeout(function() {
$("#"+mainMenuItemId+"_submenu").slideUp("fast");
}, 200);
}
function submenu_over(caller){
//get a reference to the containing div
var subMenuDiv = $(caller).closest("div");
//show the div
$(subMenuDiv).show();
//get the id of the main menu
var mainMenuItemId = $(subMenuDiv).attr("id");
mainMenuItemId = mainMenuItemId.replace("_submenu","");
clearTimeout(timeouts[mainMenuItemId]);
//remove the "off" class
$("#"+mainMenuItemId).removeClass(mainMenuItemId+"_off");
//add the "on" class
$("#"+mainMenuItemId).addClass(mainMenuItemId+"_on");
}
function submenu_out(caller){
//get a reference to the containing div
var subMenuDiv = $(caller).closest(“div”);
$(subMenuDiv).hide();
//get the id of the main menu
var menuAnchorId = $(subMenuDiv).attr(“id”);
menuAnchorId = menuAnchorId.replace(“_submenu”,“”);
//remove the "on" class
$("#"+menuAnchorId).removeClass(menuAnchorId+"_on");
//add the "off class
$("#"+menuAnchorId).addClass(menuAnchorId+"_off");
}
Here is the CSS styling:/* graphical menu codes */
#topmenu ul {
list-style: none;
width: 738px;
height:52px;
padding:0;
margin: 0px;
position: absolute;
top:94px;
right:0;
overflow: hidden;
}
#topmenu li {
display: inline;
position: absolute;
}
#topmenu li a{
float: left;
font-size:11px;
line-height: 14px;
white-space: nowrap;
text-transform: uppercase;
text-align:center;
padding: 0 0 0 0;
text-indent:777px;
overflow:hidden;
height:52px;
}
#topmenu li a:hover {
color: #bceffa;
}
a.on {
color: #bceffa;
}
#topmenu a {
color: #ffffff;
text-decoration: none;
}
#topmenu a:hover {
color: #bceffa;
text-decoration: none;
}
.furs_off {
background: url(“graphics/topmenu2.gif”) 0 0 no-repeat;
width:66px;
}
.furs_on {
background: url(“graphics/topmenu2.gif”) 0 -52px no-repeat;
}
.leather_off {
background: url(“graphics/topmenu2.gif”) -66px 0 no-repeat;
width:144px;
}
.leather_on{
background: url(“graphics/topmenu2.gif”) -66px -52px no-repeat;
}
.cashmere_off {
background: url(“graphics/topmenu2.gif”) -210px 0 no-repeat;
width:165px;
}
.cashmere_on{
background: url(“graphics/topmenu2.gif”) -210px -52px no-repeat;
}
.outerwear_off {
background: url(“graphics/topmenu2.gif”) -374px 0 no-repeat;
width:119px;
}
.outerwear_on{
background: url(“graphics/topmenu2.gif”) -374px -52px no-repeat;
}
.plus_off {
background: url(“graphics/topmenu2.gif”) -493px 0 no-repeat;
width:111px;
}
.plus_on{
background: url(“graphics/topmenu2.gif”) -493px -52px no-repeat;
}
.accessories_off {
background: url(“graphics/topmenu2.gif”) -604px 0 no-repeat;
width:133px;
}
.accessories_on{
background: url(“graphics/topmenu2.gif”) -604px -52px no-repeat;
}
ul.dropdown {
list-style: none;
margin: 0;
padding: 0;
border: none;
z-index:10000;
position:relative;
}
ul.dropdown li span {
display: block;
_display:inline-block;
text-decoration: none;
}
ul.dropdown li a {
display: block;
position: relative;
_display:inline-block; /* so IE doesn’t add space between elements /
_width: 83%; / makes block fill width in IE */
padding: 6px 10px 6px 10px;
font-size: 13px;
color: #ffffff;
text-decoration: none;
border-bottom:1px solid #b78833;
}
ul.dropdown li a:hover{
color: #ffffff;
background: #e3a73a;
text-decoration: none;
}
.dropdown span{
font-weight:bold;
color:#64450f;
margin:0 0 0 10px;
}
#furs_submenu {
width:300px;
padding: 5px 0;
background: #c8912f;
position: absolute;
top: 146px;
left: 260px;
display: none;
z-index:1000;
}
#leather_submenu {
width:166px;
padding: 5px 0;
background: #c8912f;
position: absolute;
top: 146px;
left: 325px;
display: none;
z-index:1000;
}
#cashmere_submenu {
width:192px;
padding: 5px 0;
background: #c8912f;
position: absolute;
top: 146px;
left: 470px;
display: none;
z-index:1000;
}
#plus_submenu {
width:300px;
padding: 5px 0;
background: #c8912f;
position: absolute;
top: 146px;
left: 698px;
display: none;
z-index:1000;
}
#accessories_submenu {
width:158px;
padding: 5px 0;
background: #c8912f;
position: absolute;
top: 146px;
left: 840px;
display: none;
z-index:1000;
}
