Help perfecting Customised Spry 2.0 Menu

Question

Hi there.
My Spry 2.0 menus look and behave great in IE, Firefox and Chrome but not in IOS (require 2 taps to bring down and the content is not hidden as the page is loaded).
Also, they don't sit properly in their containers in design view (they look fine in live view) which ruins the rest of my layout in design view (doesn't affect live or browser view).
Another way to explain it is that in design view, the menus are half way down the container and are not hidden (they show the bulleted, unformatted list).
Thanks very much for looking.
HTML
      <ul id="MenuBar">
        <li> <a href="#">.</a>
    <ul>
      <li> <a href="pricelist.html">Price List</a></li>
      <li> <a href="services.html">Services</a>
      </li>
      <li> <a href="terms.html">Terms</a>
      </li>
    </ul>
  </li>
</ul>
      <script type="text/javascript">
// BeginOAWidget_Instance_2141544: #MenuBar
var MenuBar = new Spry.Widget.MenuBar2("#MenuBar", {
      widgetID: "MenuBar",
   widgetClass: "MenuBar  MenuBarLeftShrink",
   insertMenuBarBreak: true,
      mainMenuShowDelay: 100,
      mainMenuHideDelay: 200,
      subMenuShowDelay: 200,
      subMenuHideDelay: 200
// EndOAWidget_Instance_2141544
      </script>
    </div>
CSS
font-weight: normal;
font-size: 16px;
font-style: normal;
padding:0;
border-color: #ffffff #ffffff #ffffff #ffffff;
border-width:0px;
border-style: none none none none;
background-image: url(Images/latesttoptabstexthire.png);
width: 155px;
height: 37px;
display:none;
width: 155px;
height: 37px;
.MenuBarLeftShrink {
float: none;
width: 155px;
height: 37px;
.MenuBarRightShrink {
float: none;
width: 155px;
height: 37px;
.MenuBarFixedLeft {
float: none;
width: 155px;
height: 37px;
.MenuBarFixedCentered {
float: none;
width: 155px;
margin-left:0px;
margin-right:0px;
height: 37px;
.MenuBarFixedCentered br {
display:block;
width: 155px;
height: 37px;
.MenuBarFixedCentered .SubMenu br {
display:none;
width: 155px;
height: 37px;
.MenuBarFullwidth {
float: none;
width: 155px;
height: 37px;
width: 155px;
height: auto;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
#MenuBar  .MenuItem {
border-width:0px;
border-style: none solid none solid;
width: 155px;
font-family: Georgia, "Times New Roman", Times, serif;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
border-right-color: #999;
border-left-color: #999;
#MenuBar  .MenuItemFirst {
border-style: none none none none;
width: 155px;
font-family: Georgia, "Times New Roman", Times, serif;
padding-left: 0px;
#MenuBar .MenuItemLast {
border-style: none solid none none;
width: 155px;
#MenuBar  .MenuItem  .MenuItemLabel{
text-align:center;
line-height:1.4em;
color:#FAF5E2;
width: 10em;
width:155px;
padding-top: 8px;
padding-right: 0px;
padding-bottom: 6px;
padding-left: 0px;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
.SpryIsIE6 #MenuBar  .MenuItem  .MenuItemLabel{
width:1em; }
/* First level submenu items */
#MenuBar .SubMenu  .MenuItem {
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 14px;
font-style: normal;
border-width:1px;
border-color: #cccccc #cccccc #cccccc #cccccc;
border-style: solid solid none solid;
height: 14px;
padding-top: 1px;
padding-right: 0px;
padding-bottom: 2px;
padding-left: 40px;
width: 101px;
#MenuBar  .SubMenu .MenuItemFirst {
border-top-style: none;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
#MenuBar  .SubMenu .MenuItemFirst .MenuItemLabel{
padding-top: 6px;
#MenuBar .SubMenu .MenuItemLast {
border-style: solid solid solid solid;
#MenuBar .SubMenu .MenuItemLast .MenuItemLabel{
padding-bottom: 6px;
#MenuBar .SubMenu .MenuItem .MenuItemLabel{
text-align:left;
line-height:1em;
color:#999999;
width: 155px;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0px;
#MenuBar .MenuItemHover {
border-color: #cccccc #cccccc #cccccc #cccccc;
margin-left: 0px;
#MenuBar .MenuItemWithSubMenu.MenuItemHover .MenuItemLabel{
color: #FAF5E2;
background: url(Images/latesttoptabstexthireselected%20-%20Copy2.png);
#MenuBar .MenuItemHover .MenuItemLabel{
color: #999900;
#MenuBar .SubMenu .MenuItemHover {
border-color: #cccccc #cccccc #cccccc #cccccc;
color: #990;
#MenuBar .SubMenu .MenuItemHover .MenuItemLabel{
color: #999900;
width: 155px;
#MenuBar .SubMenuVisible {
min-width:0%; 
border-color: #ffffff #ffffff #ffffff #ffffff;
border-width:0px;
border-style: none none none none;
height: 20px;
width: 155px;
#MenuBar.MenuBar .SubMenuVisible
z-index:10;
#MenuBar.MenuBarVertical .SubMenuVisible {
top: 0px;
left:100%;
min-width:0px;
#MenuBar .MenuLevel1 .SubMenuVisible {
min-width:0px;  top: 0px;
left:100%;
.SpryIsIE6 #MenuBar .MenuBarView .MenuItemWithSubMenuHover .MenuItemLabel /* IE6 selector  */{
color: #000000;
.SpryIsIE6 #MenuBar .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel/* IE6 selector  */{
color: #333333;
.SpryIsIE6 #MenuBar .SubMenu .SubMenu  /* IE

Answer 1

I'm sorry for your grief.  But touch screen devices don't respond to mouse hover.  Clicking twice to show sub-menus is normal behavior.
I can't say much about Design View other than it's not 100% reliable.  Use Split View with Live View and Preview in browsers.
Pop-Menu Magic 2
http://www.projectseven.com/products/menusystems/pmm2/index.htm
Nancy O.