Menu system for desktop/laptop/tablet

Question

I need to create a drop down menu that will work over a desktop/laptop/tablet and mobile.
Spry does not achieve this and other css/jquery menus do not seem to condense correctly when viewed in multi screen preview in Dreamweaver.
Anyone a suggestion of a suitable menu systems, have tried the apycom menu system see below, this works to a degree, unless I am doing something wrong, as on the tablet and mobile version you can not see the sections that have wrapped around, nor use the sub menus.
Thanks
<div id="menu">
  <ul class="menu">
<li><a href="#" class="parent"><span>Gentleman</span></a>
<div><ul>
<li><a href="#" class="parent"><span>Sub Item 1</span></a>
<div><ul>
<li><a href="#" class="parent"><span>Sub Item 1.1</span></a>
<div><ul>
<li><a href="#"><span>Sub Item 1.1.1</span></a></li>
<li><a href="#"><span>Sub Item 1.1.2</span></a></li>
</ul></div>
</li>
<li><a href="#"><span>Sub Item 1.2</span></a></li>
<li><a href="#"><span>Sub Item 1.3</span></a></li>
<li><a href="#"><span>Sub Item 1.4</span></a></li>
<li><a href="#"><span>Sub Item 1.5</span></a></li>
<li><a href="#"><span>Sub Item 1.6</span></a></li>
<li><a href="#" class="parent"><span>Sub Item 1.7</span></a>
<div><ul>
<li><a href="#"><span>Sub Item 1.7.1</span></a></li>
<li><a href="#"><span>Sub Item 1.7.2</span></a></li>
</ul></div>
</li>
      </ul>
</div>
     </li>
<li><a href="#"><span>Sub Item 2</span></a></li>
<li><a href="#"><span>Sub Item 3</span></a></li>
    </ul>
</div>
    </li>
<li><a href="#"><span>Ladies</span></a>
<div><ul>
<li><a href="#" class="parent"><span>Sub Item 1</span></a>
<div><ul>
<li><a href="#"><span>Sub Item 1.1</span></a></li>
<li><a href="#"><span>Sub Item 1.2</span></a></li>
      </ul></div>
     </li>
     <li>
<a href="#" class="parent"><span>Sub Item 2</span></a>
      <div><ul>
      <li><a href="#"><span>Sub Item 2.1</span></a></li>
<li><a href="#"><span>Sub Item 2.2</span></a></li>
      </ul></div>
     </li>
     <li><a href="#"><span>Sub Item 3</span></a></li>
     <li><a href="#"><span>Sub Item 4</span></a></li>
     <li>
<a href="#"><span>Sub Item 5</span></a></li>
     <li>
<a href="#"><span>Sub Item 6</span></a></li>
     <li>
<a href="#"><span>Sub Item 7</span></a></li>
    </ul></div>
    </li>
   <li><a href="#"><span>Accessories</span></a></li>
<li class="last"><a href="#"><span>Cloth</span></a></li>
<li class="last"><a href="#"><span>Information</span></a></li>
<li class="last"><a href="#"><span>Estate Work</span></a></li>
<li class="last"><a href="#"><span>Sale</span></a></li>
<li class="last"><a href="#"><span>Cart Checkout</span></a></li>
  </ul>
</div>

Answer 1

Spry is dead because it's not responsive or touch screen friendly.  Replace Spry with a better menu.
Related links:
PVII's Pop-Menu Magic3 (commercial DW extension)
http://www.projectseven.com/products/menusystems/pmm3/index.htm
Responsive Iconic
Dynamic Drive CSS Library- Responsive Iconic Menu
Responsive Hybrid
Dynamic Drive DHTML Scripts- Page Sideview Menu
jQuery Superfish
http://users.tpg.com.au/j_birch/plugins/superfish/
jQuery MeanMenu (responsive on mobile)
http://www.meanthemes.com/plugins/meanmenu/
Nancy O.