Dynamic Menu not Dropping

Hi all,

I have a horizontal dynamic drop-down menu, it worked when I used the default width of 162px, but due to the numbers of categories I have, I had to set the width to auto (both for the main and level 1) to compact it to the text size but it turned out that the level 1 menu is not dropping on hover. I have been battling this for the past 3hrs without success.

Setting the width to auto works perfectly well with static drop-downs, I'm wondering what could be the problem with dynamic menus.

Any suggestions guys? I just bought this stuff yesterday! !!

using auto widths, whether the menu is static or dynamic will not be compatible with IE 7 and below. This is a restriction to those browsers.

Can you send a link to your page so I can take a look at the problem.

Originally Said By: Jason Byrnes

  using auto widths, whether the menu is static or dynamic will not be compatible with IE 7 and below. This is a restriction to those browsers.

Can you send a link to your page so I can take a look at the problem.  

Hi Jason, the site is not live yet, still working on my local machine. Well I managed to trace the problem a bit. When I complie the menu, it wraps the "<a></a>" in "level-1 li" with a span tag e.g

Error:
<li class="parent link">
<span class="link">
<a class="link" href="#">Products</a>
</span>
<ul class="level-1">
<li class="link">
<span><a class="link" href="#">Services</a></span>
</li>
<li class="link">
<span><a class="link" href="#">Support</a></span>
</li>
</ul>
</li>

I now had to manually remove the span tags to get it to drop down. Nevertheless each time I recompile the menu, the span tags resurfaces.

Working:
<li class="parent link">
<span class="link">
<a class="link" href="#">Products</a>
</span>
<ul class="level-1">
<li class="link">
<a class="link" href="#">Services</a>
</li>
<li class="link">
<a class="link" href="#">Support</a>
</li>
</ul>
</li>

So how do I go about it and how do I overcome the restriction you just pointed out about IE 7 and below.

Secondly, I have this problem when I resize the browser window the menu wraps forming 2, 3 ... rows etc. I'll be glad if I can get help with this.

It's hard to tell what the problem is just looking at the code here, I would have to see it in context in your page.



As for the widths, you would need to specify a width in pixels.



the wrapping that you describe will occur in a liquid site. A liquid site will try to resize the menu div based on the size of the browser window, when the menu div shrinks, the menue will have to wrap onto another line.

Using a fixed width layout, this will not happen.