Bullet List Accordion Menu with nested levels not functioning in IE7

[curavon]

1) Script Title: Bullet List Accordion Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu-bullet.htm

3) Describe problem: A second-level nested accordion menu is not functioning in PC IE7

http://creativemerc.com/testing/dvdandrea/index.html

Click on "Packaging" and then click on any band name. One or more thumbnails will "accordion" into view. When you click on any of the thumbnails, you *should* be able to see an enlargement via the Lightbox script. However, clicking on the thumb simply closes the level (and, I should point out, it does so instantly and not in the typical "motion" afforded by the accordion script).

I believe I have followed the implementation instructions correctly, as the page functions perfectly in Firefox (Mac and PC) and Safari.

So where am I going wrong?

As always, any help is very much appreciated.

[ddadmin]

The problem is due to the structure of your "subexpandable" headers- you have TABLE elements in between LI elements, which is a no no. In some browsers, (in this case, IE), it's confusing it:


<li class="subexpandable">Yeti</li>
<table border="0" cellspacing="0" cellpadding="0" class="subcategoryitems">
<tr>
<td><a href="images/packaging/yeti~pic1.jpg" rel="lightbox[packaging]" title="Yeti CD"><img src="images/thumbs/yeti~pic1_tn.png" alt="Yeti CD" /></a></td>

<td><a href="images/packaging/yeti~pic2.jpg" rel="lightbox[packaging]" title="Yeti CD - Front and Back"><img src="images/thumbs/yeti~pic2_tn.png" alt="Yeti CD - Front and Back" /></a></td>
<td><a href="images/packaging/yeti.jpg" rel="lightbox[packaging]" title="Yeti CD Artwork"><img src="images/thumbs/yeti_tn.png" alt="Yeti CD Artwork" /></a></td>
<td><img src="images/thumbs/placeholder_tn.png" /></td>
</tr>
</table>

Change the LI elements to DIVs instead:


<div class="subexpandable">Yeti</div>
<table border="0" cellspacing="0" cellpadding="0" class="subcategoryitems">
<tr>
<td><a href="images/packaging/yeti~pic1.jpg" rel="lightbox[packaging]" title="Yeti CD"><img src="images/thumbs/yeti~pic1_tn.png" alt="Yeti CD" /></a></td>

<td><a href="images/packaging/yeti~pic2.jpg" rel="lightbox[packaging]" title="Yeti CD - Front and Back"><img src="images/thumbs/yeti~pic2_tn.png" alt="Yeti CD - Front and Back" /></a></td>
<td><a href="images/packaging/yeti.jpg" rel="lightbox[packaging]" title="Yeti CD Artwork"><img src="images/thumbs/yeti_tn.png" alt="Yeti CD Artwork" /></a></td>
<td><img src="images/thumbs/placeholder_tn.png" /></td>
</tr>
</table>

There may be other structural issues with the above, but basically, if you look at your "Prints' headers that do work correctly in IE, that should give you enough direction for the other headers that don't.