Help with Spry Menu Bar 2.0 customization

i having trouble converting original spry menu version 2.0.

 

on website http://bucknellprimaryschool.org/ 'old' menu system works great not in ipads (ie sub menu not pop out).

 

i discovered hat spry 2.0 work cannot replicate submenu of original - can menu pop out configuring different colours each button has me beat time.  original modified using piece of css coloured rollover effect sub menus cannot figure our how replicate this.

 

/**link classes**/

#rollover1 a.item1 {background: #bddbec; border-top-right-radius:15px; border-bottom-right-radius:15px; }

 

#rollover1 li a.item1:hover,

#rollover1 li a.item1:active,

#rollover1 li a.item1:focus {background: white; }

 

#rollover2 a.item2 {background: #b4de8f; border-bottom-right-radius:15px; border-top-right-radius:15px; }

 

#rollover2 a.item2:hover,

#rollover2 a.item2:active,

#rollover2 a.item2:focus {background: white;}

 

#rollover3 a.item3 {background: #f8b084; border-bottom-right-radius:15px; border-top-right-radius:15px; }

 

#rollover3 a.item3:hover,

#rollover3 a.item3:active,

#rollover3 a.item3:focus {background: white;}

 

#rollover4 a.item4 {background: #cccccc; border-bottom-right-radius:15px; border-top-right-radius:15px;}

 

#rollover4 a.item4:hover,

#rollover4 a.item4:active,

#rollover4 a.item4:focus {background: white;}

 

 

 

#rollover5 a.item5 {background: #cc8bd2; border-bottom-right-radius:15px; border-top-right-radius:15px; }

 

#rollover5 a.item5:hover,

#rollover5 a.item5:active,

#rollover5 a.item5:focus {background: white;}

 

#rollover6 a.item6 {background: #fdd760; border-bottom-right-radius:15px; border-top-right-radius:15px; }

 

#rollover6 a.item6:hover,

#rollover6 a.item6:active,

#rollover6 a.item6:focus {background: white;}

 

#rollover7 a.item7 {background: #f2d0e9; border-bottom-right-radius:15px; border-top-right-radius:15px; }

 

#rollover7 a.item7:hover,

#rollover7 a.item7:active,

#rollover7 a.item7:focus {background: white; }

 

 

 

 

/**end rollover**/

 

can please give me steer?

 

thanks

 

graham

the relationship between 2 versons of spry name. javascript , css vastly different each other. manipulation of dom not different, hard follow non-savvy person.

 

for instance

<li> <a href="#">home</a> </li>

becomes

<li class="menuitemcontainer"> <a tabindex="0" class="menuitem menuitemfirst" href="#"><span class="menuitemlabel">home</span></a> </li>

when goes live , after javascript has gotten hold of it.

 

i recommend go more modern approach , use 1 of many jquery menu systems

More discussions in Dreamweaver support forum

adobe