Problem getting multiple menus with flyouts to work on the same page. . .

Problem getting multiple menus with flyouts to work on the same page. . .

Hello,

I'm not very good with JavaScript, so I'm sure that I am probably missing a basic concept. . .

I want to have multiple menus with flyouts on the same page.  I have mouse over calls that seem to work to call the javascript function.  The VisionFunding one works, but the m3 one does not display properly.  It looks like when the m3 one shows up, it is empty.

I think I am missing something basic in the jQuery function and CSS interactions.

Here is the code for the image map calls.

  1. <map name="WFAgile">
      <area shape="rect" coords="333,275,393,316" onMouseOver="javascript:showMenu('m3')" alt="M3 Target BaseLined">
      <area shape="rect" coords="47,418,451,449" onMouseOver="javascript:showMenu('VisionFunding')" alt="Vision Funding">
      <area shape="rect" coords="47,448,450,575" onMouseOver="javascript:hideMenu('VisionFunding')" alt="clear">
    </map>



Here is the code for the jQuery/JavaScript
  1. <link rel="stylesheet" href="css/menu.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css" />
    <script>
        $(function() {
            $( "#menu" ).menu();
            $( "#m3" ).menu();
        });

        function hideMenu(menuId)  {
            //hide all the menues
            document.getElementById('m3').style.display="none";
            document.getElementById('VisionFunding').style.display="none";
        }

        function showMenu(menuId)  {
            //hide all the menues
            //document.getElementById('M3').style.display="none";
            document.getElementById('VisionFunding').style.display="none";
            document.getElementById('m3').style.display="none";
            //document.getElementById('menu3').style.display="none";
            //document.getElementById('menu4').style.display="none";
            //display the menu for this area of the image
            document.getElementById(menuId).style.display="block";
        }

    </script>


























Here is the CSS

  1. <style type="text/css">
        <!--
        #content {
        position: relative}
         
        #content a {
        display: block}
         
        #menu1, #menu2, #menu3, #menu4 {
        display: none}
         
        #VisionFunding {
        position: absolute;
        top: 470px;
        left: 478px;}
       
        #m3 {
        position: absolute;
        height:auto;
        top: 370px;
        left: 378px;}
        -->
    </style>

























  1. <span id="m3" style="display: none;">
        <ul id="menu2">
            <li>
                    <a href="#">M3 Target BaseLined</a>
                <ul>
                    <li class="ui-state-disabled"><a href="#">Activities</a></li>
                    <li><a href="#">Artifacts</a></li>
                    <li><a href="#">Templates</a></li>
                    <li><a href="#">Topics</a></li>
                    <li><a href="#">External Links</a></li>
                </ul>
          </li>
        
        </ul>

    </span>
    <span id="VisionFunding" style="display: none;">
        <ul id="menu">
            <li>
                    <a href="#">M3 Target BaseLined</a>
                <ul>
                    <li class="ui-state-disabled"><a href="#">Activities</a></li>
                    <li><a id="message" href="#">Conduct Vision Meetings</a></li>
                    <li><a href="#">Artifacts</a></li>
                    <li><a href="#">Templates</a></li>
                    <li><a href="#">Topics</a></li>
                    <li><a href="#">External Links</a></li>
                   
                </ul>
          </li>
        
        </ul>

    </span>
































Thanks for any help that you can provide!