Despite trying various solutions with JQuery and CSS Tricks, I'm encountering a problem where my drop-down menu won't display properly over my accordion slider in IE7. This issue doesn't appear in other browsers. Any assistance on resolving this would be highly appreciated.
Here are the code snippets:
HTML
<div class="shell">
<div class="border">
<div id="header">
<h1 id="logo"><img src="" class="logo" /></h1>
<div class="cl"> </div>
</div>
<div id="nav">
<ul class="menu">
<li class="current_page_item"><a href="index.php?selected=1">Home</a></li>
<li ><a href="#">Applications</a>
<ul class="sub-menu">
<li><a href="#">Sub1</a></li>
<li><a href="#">Sub2</a></li>
<li><a href="#">Sub3</a></li>
</ul>
</li>
<li ><a href="#">Products</a>
<ul class="sub-menu">
<li><a href="#">Sub1</a></li>
<li><a href="#">Sub2</a></li>
<li><a href="#">Sub3</a></li>
<li><a href="#">Sub4</a></li>
</ul>
</li>
<li ><a href="#">News/Media</a></li>
<li ><a href="#">About Us</a></li>
<li ><a href="#">Contact</a></li>
</ul>
</div><!--end nav-->
<div id="accordion-1">
<dl>
<dt>Slide 1</dt>
<dd>
<h2><img src="images/accordian/efficacy.jpg" />Slide 1</h2>
<p>Slide 1</p>
</dd>
<dt>Slide 2</dt>
<dd>
<h2><img src="images/accordian/accuracy.jpg" />Slide 2</h2>
<p>Slide2</p>
</dd>
<dt>Slide 3</dt>
<dd>
<h2><img src="images/accordian/cost.jpg" />Slide 3</h2>
<p>Slide 3 </p>
</dd>
</dl>
</div>
CSS
/* --------- */
/* -- Nav -- */
/* --------- */
#nav { height:43px; border-top:1px solid #dbdbdb; border-bottom:1px solid #dbdbdb; }
.menu { padding: 7px 6px 0 0; }
.menu li { margin: 0 5px; float: left; list-style:none; position:relative; border-right: 1px solid #DBDBDB; }
....(CSS continues)