Non-working Spry menu in DIV

Question

I have two spry menus on one page. One is main site and one is that individual page's menu that shows and hides div accordingly.

The "artistMenu" div doesn't work and it doesn't even have the hover effects, although it's set up exactly like the site menu apart from the different UL id's

<div id="artistMenu">
  <ul id="MenuBar2" class="MenuBarHorizontal">
    <li><a href="#" onclick="artistsocial()">Social</a></li>
    <li><a href="#" onclick="artistmusic()">Music</a></li>
  </ul>
  <!--Artist menu end--></div>

CSS:

#artistMenu{
    background-color: #000;
}

The main site menu is set up virtually the same way except it's in the header div with logo and has no background.

If I comment out the <div id="artistMenu"> the link's work however, I lose my background color and the contents below the menu, for whatever reason because un-styled as the pop out of the <div id="gridContainer"> and and spread the width of the page.

I've worked on this for 5 days off and on and can't figure it out nor find info online.