Horizontal Menu - Submenu Problem in IE

Question

I wanted a Spry menu that would adjust to longer menu abd submenu items, and followed the tips in the Adobe Labs article "Auto Width Horizontal Menu Bar." What I've ended up with works fine in Forefox, but in IE7, when I hover over the Main menu item, the submenu drops down fine. But when I mouse over the first item in the submenu, the submenu realigns from a striaght drop down list into submenu items arrayed in two horitzontal rows below the main menu.
I've pored through it for a couple of hours now, and compared what I did closely to the Auto Width menu bar tutorial sample, and apart from some font styling, I'm not finding what's going wrong. Any help would be much appreciated.
The menu is up on this page:
http://www.catskill4sale.com/Nav_topnew.htm
I'm using Spry 1.6.1 and uploaded those Spry assets to the server.
Thanks for any help anyone can offer on this.
David

Answer 1

Hi David,
First of all add a closing bracket as shown in red in the following tag:
<meta name="description" content="Sullivan County, New York Real Estate Listings.">
I have gone through your listing and found that you did not make an allowance for IE.
In the following steps I have shown the complete code rather than change your code.
1. Make sure you have the original unadulterated Spry stylesheet attached to your page.
2. Add the following styles to your page. The style rule coiloured red is read by IE only hence the remark (/*...*/):
<style type="text/css">
<!--
.clearAll {
    clear: both;
.sidebar {
    /*width: 200px;*/
ul.MenuBarHorizontal#MenuBar1 li {
    width: auto;
ul.MenuBarHorizontal#MenuBar1 ul {
    width: auto;
ul.MenuBarHorizontal#MenuBar1 ul li {
    display: block;
    float: none;
    width: auto;
    white-space: nowrap;
    border-bottom: solid 1px #EEE;
ul.MenuBarHorizontal#MenuBar1 a.MenuBarItemSubmenu {
    padding: 0.5em 2em 0.5em 0.75em;
-->
</style>
3. Add your menubar as follows making sure that you add the extra red coloured DIV's to accomodate IE :
<div class="sidebar">
  <ul id="MenuBar1" class="MenuBarHorizontal">
    <li><a href="default.asp">Main Home</a>            </li>
    <li><a href="listings.asp">Search MLS</a></li>
    <li><a class="MenuBarItemSubmenu" href="resources.asp">Buyer Info</a>
      <ul>
        <li><a href="lakefront.asp">About Lakes</a></li>
        <li><a href="family.asp">Familes with Children</a></li>
        <li><a href="value2.asp">What Houses Cost Here</a></li>
        <li><a href="gayre.asp">For GLBT Buyers</a></li>
        <li><a href="highend.asp">For Upper End Buyers</a></li>
        <li><a href="faq.asp">Buyer FAQs</a></li>
      </ul>
    </li>
    <li><a href="http://blog.catskill4sale.com">My Blog</a></li>
    <li><a href="county.asp" class="MenuBarItemSubmenu">Area Intro</a>
      <ul>
        <li><a href="county.asp">Sullivan County Areas</a></li>
        <li><a href="catskillsrealestate.asp">Catskill Cnty Comparison</a></li>
      </ul>
      </li>
    <li><a href="current.asp" class="MenuBarItemSubmenu">Market Conditions</a>
      <ul>
        <li><a href="current.asp">Latest Market Report</a></li>
        <li><a href="archive.asp">Archived Reports</a></li>
      </ul>
      </li>
    </ul>
  </div> 
  <div class="clearAll"> </div>
  <script type="text/javascript">
  <!--
  var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
  //-->
  </script>
</div>
I hope the above will fix your problem. I have purposely not centered the submenus because that added another problem.
Ben