JQuery Accordian Menu Overlap
Hi all,
I have a problem, with a Jquery script. I'm very new to it so please forgive me if this is beyond simple.
I have an expanding menu which seems to work perfectly in FireFox, but everyone's favourite browser IE7, is overlapping the contents of the expanding section.
Here is a link to better illustrate my issue.
http://www.danickweb.co.uk/dan/test-site/
The basic html section is...
<ul id="nav">
<li><img src="_images/navigation-arrow.jpg" alt="" /><a href="#">test</a></li>
<li><img src="_images/navigation-arrow.jpg" alt="" /><a href="#">test</a></li>
<li><img src="_images/navigation-arrow.jpg" alt="" /><a href="#" class="slide">test expand</a></li>
<div id="drop">
<ul class="sub-nav">
<li><a href="#">sub test</a></li>
<li><a href="#">sub test</a></li>
<li><a href="#">sub test</a></li>
<li><a href="#">sub test</a></li>
<div class="clear"></div>
</ul>
</div>
<li><img src="_images/navigation-arrow.jpg" alt="" /><a href="#">test</a></li>
</ul>
JQuery...
jQuery(document).ready(function() {
$('a.slide').click(function() {
$("#drop").stop().slideToggle("slow");
});
});
CSS...
#drop {
display: none;
}
#drop ul.sub-nav {
list-style: none;
margin-bottom: 0px;
}
#drop ul.sub-nav li {
width: 165px;
height: 20px;
}
those of your with Firebug installed into Firefox will be able to see any other CSS properties that might be affecting it.
I've tried all i can think of and searched the net and forums for anything that could be causing it but no luck just yet, so i thought i'd come to the experts.
Hope you can help, appreciate anyone's time.
Thanks