Spry Menu 2.0 and mobile devices... (Ughhh....)

Question

Let me start by saying that I am such a NEWBIE!
I developed some sites for work which work great online/live.  The problem is that the spry menu bar 2.0 does not function on iPad or iPhone.  The main menu works fine but the submenus do not fly-out.
Can anyone help me with this?  It's probably so simple, but not for me at this stage of creating sites.
THANKS in advance!

Answer 1

Whoah.... So, if I understand you correctly, the spry menu works just fine -- at least in terms of its capability.  I am able to navigate to main/top level pages.  So, medical send me to medical, dental to dental and so on.  What I can't do is access the medical (for example) submenu to pull up documents or other pages.
Am I correct?
I need to rethink a more mobile-friendly design.
Thanks so much for responding.
And, the code is as follows:
<ul class="MenuBarVertical" id="MenuBar1" onfocus="MM_openBrWindow('../termsofuse.html','TermsofUse','scrollbars=yes,width=4&quot;, height=4&quot;')">
        <li><a href="../TORindex.html">Overview</a></li>
        <li><a href="../termsofuse.html" target="_new">Terms of Use</a></li>
        <li><a href="../TORmedical.html" class="MenuBarItemSubmenu">Medical</a>
          <ul>
            <li><a href="../TORmedical.html">Overview</a></li>
            <li><a href="../Medical/SEIU_Copay_May2011.pdf" target="-new">Benefit Summary</a></li>
            <li><a href="../Medical/Enrollment Form.pdf" target="_new">Enrollment Form</a></li>
            <li><a href="../Medical/forms_medical_claim_form.pdf" target="_new">Claim Form</a></li>
            <li><a href="http://cigna.benefitnation.net/cigna/docdir.aspx" target="_new">Provider Directory</a></li>
            <li><a href="https://my.cigna.com/web/public/guest" target="_new">Member Website</a></li>
            <li><a href="http://www.webmd.com/ " target="_new">WebMD</a></li>
          </ul>
        </li>
        <li><a href="../TORrx.html" class="MenuBarItemSubmenu">Prescription</a>
          <ul>
            <li><a href="../TORrx.html">Overview</a></li>
            <li><a href="../RX/SEIU_Copay_May2011.pdf" target="_new">Benefit Summary</a></li>
            <li><a href="http://cigna.benefitnation.net/cigna/docdir.aspx" target="_new">Find a Pharmacy</a></li>
          </ul>
        </li>
        <li><a href="../TORdental.html" class="MenuBarItemSubmenu">Dental</a>
          <ul>
            <li><a href="../TORdental.html">Overview</a></li>
            <li><a href="../Dental/Non-Union Dental Benefit Summary (1).pdf" target="_new">Benefit Summary</a></li>
            <li><a href="../Dental/Dental Claim.pdf" target="_new">Claim Form</a></li>
            <li><a href="http://cigna.benefitnation.net/cigna/docdir.aspx" target="_new">Provider Website</a></li>
</ul>
        </li>
        <li><a href="../TORvision.html" class="MenuBarItemSubmenu">Vision</a>
          <ul>
            <li><a href="../TORvision.html">Overview</a></li>
            <li><a href="../Vision/visn-others.pdf" target="_new">Benefit Summary</a></li>
            <li><a href="https://www.cigna.vsp.com/member/htmls/find_dr.jsp?grp=nulll" target="_new">Find a Doctor</a></li>
          </ul>
        </li>
        <li><a href="../TORlife.html">Life &amp; AD&amp;D</a>          </li>
<li><a href="../TORstd.html">Short Term Disability</a>  </li>
        <li><a href="../TORltd.html">Long Term Disability</a>          </li>
<li><a href="../TORcontacts.html">Contacts</a></li>
      </ul>
CSS for spry menu bar is:
@charset "UTF-8";
   ul.MenuBarVertical
          margin: 0;
          padding: 0;
          list-style-type: none;
          font-size: 100%;
          cursor: default;
          width: 8em;
ul.MenuBarActive
          z-index: 1000;
ul.MenuBarVertical li
          margin: 0;
          padding: 0;
          list-style-type: none;
          font-size: 100%;
          position: relative;
          text-align: left;
          cursor: pointer;
          width: 9em;
ul.MenuBarVertical ul
          margin: -5% 0 0 95%;
          padding: 0;
          list-style-type: none;
          font-size: 100%;
          position: absolute;
          z-index: 1020;
          cursor: default;
          width: 8.2em;
          left: -1000em;
          top: 0;
ul.MenuBarVertical ul.MenuBarSubmenuVisible
          left: 0;
ul.MenuBarVertical ul li
          width: 8.2em;
ul.MenuBarVertical
          border: 1px solid #CCC;
ul.MenuBarVertical ul
          border: 1px solid #CCC;
ul.MenuBarVertical a
          display: block;
          cursor: pointer;
          background-color: #06F;
          padding: 0.5em 0.75em;
          color: #FFF;
          text-decoration: none;
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
          background-color: #33C;
          color: #FFF;
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
          background-color: #33C;
          color: #FFF;
ul.MenuBarVertical a.MenuBarItemSubmenu
          background-image: url(SpryMenuBarRight.gif);
          background-repeat: no-repeat;
          background-position: 95% 50%;
  ul.MenuBarVertical a.MenuBarItemSubmenuHover
          background-image: url(SpryMenuBarRightHover.gif);
          background-repeat: no-repeat;
          background-position: 95% 50%;
ul.MenuBarVertical iframe
          position: absolute;
          z-index: 1010;
          filter:alpha(opacity:0.1);
@media screen, projection
          ul.MenuBarVertical li.MenuBarItemIE
                    display: inline;
                    f\loat: left;
                    background: #FFF;