menu system for desktop/laptop/tablet

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>