I had a look at both sites and I see the menu bar change as the site is shrunk down.
The workings of the SpryMenuBar is as follows
ul#MenuBar1.MenuBarHorizontal
li a /* first level
ul
li a /* second level
The width of the first ul is set to automatic which means that it will adjust to its contents, but not exceed the width of its container (table). The width of the first li is set to 120px. If we multiply 120px by the number of first level menu items (8) we finish up with a total width of 960px. Hence the first ul will be set to a width of 960px. But as we shrink the page, the container (table) will also shrink to the stage where it will be less than the 960px width of the ul.
Now there is not enough space to house all of the menu items causing the last menu item to step down to the next line. This will continue to happen as we continue to shrink the width of our page to the extent that each menu item sits on its own line. This gives the impression that the menu bar is vertical rather than horizontal.
There are a couple of ways to fix this.
1. Give the first ul a fixed width of 960px or thereabouts. Line 21 of SpryMenuBarHorizontal.css
or
2. Change the menu bar for narrower devices as can be seen here Starter Template for Bootstrap. When you change the width of the page, the menu items are placed in a drop-down container.
As a side note, this problem is not unique to the SpryMenuBar, it happens with all menu-bars.