JquerySlideMenu sub menus hidden by slide show in div below menu

**JD2** · 02-24-2010, 02:21 AM

I am trying to use the JquerySlideMenu in a basic web page (using CS4 for developing the page), but in a div below the menu I have a slide show that hides the drop down sub menus. Any help would be greatly apprecaited, as I am new at web development.

source posted below

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<!-- Menu javascript -->
<link rel="stylesheet" type="text/css" href="css/jqueryslidemenu.css" />

<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jqueryslidemenu.js"></script>

<!-- End Menu Insert -->

<link rel="shortcut icon" href="images/ghi.ico">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!-- picture slideshow javascript -->
<script src="js/mootools.v1.11.js" type="text/javascript"></script>
<script src="js/jd.gallery.js" type="text/javascript"></script> 
<link rel="stylesheet" href="css/jd.gallery.css" type="text/css" media="screen" />

<link href="css/generous_hands_main.css" rel="stylesheet" type="text/css" /><!--[if IE 5]>
<style type="text/css"> 
/* place css box model fixes for IE 5* in this conditional comment */
.twoColFixLtHdr #sidebar1 { width: 230px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css"> 
/* place css fixes for all versions of IE in this conditional comment */
.twoColFixLtHdr #sidebar1 { padding-top: 30px; }
.twoColFixLtHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
</head>

<body class="twoColFixLtHdr">

<div id="container">
  <div id="header">
    <table width="100%" border="0" class="twoColFixLtHdr">
  <tr>
    <th scope="col" width="30%"><img src="images\ghlogo.gif" width="60%" height="94" alt="Generous Hands Logo" /></th>
    <th scope="col">	
        <table width="100%" border="0" class="twoColFixLtHdr">
          <tr>
           <th scope="col" width="100%"><h1 align="center">Generous Hands, Inc.</h1></th>
          </tr>
          <tr>
            <td scope="col" width="100%">
                 <div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="http://www.dynamicdrive.com">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Folder 1</a>
  <ul>
  <li><a href="#">Sub Item 1.1</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
  <li><a href="#">Sub Item 1.3</a></li>
  <li><a href="#">Sub Item 1.4</a></li>
  </ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
  <ul>
  <li><a href="#">Sub Item 2.1</a></li>
  <li><a href="#">Folder 2.1</a>
    <ul>
    <li><a href="#">Sub Item 2.1.1</a></li>
    <li><a href="#">Sub Item 2.1.2</a></li>
    <li><a href="#">Folder 3.1.1</a>
		<ul>
    		<li><a href="#">Sub Item 3.1.1.1</a></li>
    		<li><a href="#">Sub Item 3.1.1.2</a></li>
    		<li><a href="#">Sub Item 3.1.1.3</a></li>
    		<li><a href="#">Sub Item 3.1.1.4</a></li>
    		<li><a href="#">Sub Item 3.1.1.5</a></li>
		</ul>
    </li>
    <li><a href="#">Sub Item 2.1.4</a></li>
    </ul>
  </li>
  </ul>
</li>
<li><a href="http://www.dynamicdrive.com/style/">Item 4</a></li>
</ul>
<br style="clear: left" />
</div>
            </td>
          </tr>
        </table>
    </th>
  </tr>
</table>
  <!-- end #header --></div>
  <div id="sidebar1">
    <h3>Sidebar1 Content</h3>
    <p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the left side of the #mainContent div if it will always contain more content. </p>
     <!-- end #sidebar1 --></div>
  <div id="mainContent">
    <center>
    <div id="myGallery">
      <div class="imageElement">
        <h3>Kids Helping Kids</h3>
<p></p>
<p><img src="images/anna big backpack.jpg" class="full" />
  <!--<img src="images/yca1.jpg" class="thumbnail" />-->
</p>
</div>
<div class="imageElement">
<h3>August 2009 Fresh Food Initiative</h3>
<p></p>
<p><img src="images/IMG_0592.jpg" class="full" />
<!--<img src="images/yca2.jpg" class="thumbnail" />-->
</p>
</div>
<div class="imageElement">
<h3>Generous Hands Wins the 2008 Kalamazoo County State Bank Chili Cook Off</h3>
<p></p>
<p><img src="images/IMG_1025.jpg" class="full" />
<!--<img src="images/yca2.jpg" class="thumbnail" />-->
</p>
</div>
<div class="imageElement">
<h3>Generous Hands Volunteers</h3>
<p></p>
<p><img src="images/IMG_0648.jpg" class="full" />
<!-- <img src="images/homephoto.jpg" class="thumbnail" /> -->
</p>
</div>
</div>
</center>


<!-- timed gallery   
<script type="text/javascript">
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true,
showCarousel: false,
useThumbGenerator: true 
});
}
window.addEvent('domready', startGallery);
</script> 
-->

<!-- Simple showcase slideshow -->
<script type="text/javascript">
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true,
showArrows: true,
showCarousel: false,
embedLinks: false
});
}
window.addEvent('domready', startGallery);
</script> 


<!-- Simple timed slideshow 
<script type="text/javascript">
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true,
showArrows: false,
showCarousel: false
});
}
window.addEvent('domready', startGallery);
</script> 
-->
</h2>
  <h3>&nbsp;</h3></center>
	<!-- end #mainContent --></div>
	<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
<div id="footer">
     <p> <left><strong>Our Sponsors</strong> </left></p>

    </p>
    </div>
  <div id="footer">
  <!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>

**simcomedia** · 02-24-2010, 04:19 PM

Try adding z-index: 100; to this class:

<div id="myslidemenu" class="jqueryslidemenu">

That should bring it forward. It's a common problem where pulldowns fall behind a flash video or some other active element.

Thread: JquerySlideMenu sub menus hidden by slide show in div below menu

Thread Tools

Search Thread

JquerySlideMenu sub menus hidden by slide show in div below menu

Bookmarks

Bookmarks

Posting Permissions