jQuery Multi Level CSS Menu #2 dropdown hiding under second navigation bar.

[Dracov]

1) jQuery Multi Level CSS Menu #2

2) http://www.dynamicdrive.com/style/cs...el_css_menu_2/

3) Im trying to put two naviagtion bars that are using the same jquery script one under the other, however what happens is the dropdown from the first one are being shoved underneath the second bar.

You can see an example here:
http://www.blumenthaluniformstore.com/
How can I solve that issue?

Thank you in advance.
Dracov

[ddadmin]

Inside the sub ULs of the first of the two menus on your page, try explicitly giving them a large z-index value, for example:

<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 style="z-index:1000">
  <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  style="z-index:1000">
  <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>

<br />



<div id="myslidemenu2" class="jqueryslidemenu" style="z-index:1000">
<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>

[Dracov]

I tried that, unfortunately that didn't work. Here's my code:

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
 	<li><a href="UMSS.cfm?page=page-index.cfm&template_code=Results&catunique=PUB%5FShirtsAndPants&category=399&templatename=Home">Shirts & Pants</a>
	<ul style="z-index:1000">
		<li><a href="UMSS.cfm?page=page-index.cfm&category=313&template_code=Category&Submit=Search">Camp Shirts</a></li>
		<li><a href="UMSS.cfm?page=page-index.cfm&category=293&template_code=Category&Submit=Search">Fashion</a></li>
	</ul>
	</li>
 	<li><a href="UMSS.cfm?page=page-index.cfm&template_code=Results&catunique=PUB%5FOuterwearAndJumpsuits&category=400&templatename=Home">Outerwear & Jumpsuits</a>
	<ul style="z-index:1000">
		<li><a href="UMSS.cfm?page=page-index.cfm&category=592&template_code=Category&Submit=Search">Accessories</a></li>
	</ul>
	</li>
    <li><a href="UMSS.cfm?page=page-index.cfm&template_code=Results&catunique=PUB%5FFootwearAndHeadwear&category=401&templatename=Home">Footwear & Headwear</a></li>
    <li><a href="UMSS.cfm?page=page-index.cfm&template_code=Results&catunique=PUB%5FHiVisAndRainwear&category=402&templatename=Home">HiVis & Rainwear</a></li>
    <li><a href="UMSS.cfm?page=page-index.cfm&template_code=Results&catunique=PUB%5FSportswearCasualTactical&category=403&templatename=Home">Sportswear-Casual-Tactical</a></li>
    <li><a href="UMSS.cfm?page=page-index.cfm&template_code=Results&catunique=PUB%5FDressUniforms&category=404&templatename=Home">Dress Uniforms</a></li>
    <li><a href="UMSS.cfm?page=page-index.cfm&template_code=Results&catunique=PUB%5FOtherApparel&category=405&templatename=Home">Other Apparel</a></li>
 </ul>
<br style="clear: left" />
<ul>
    <li><a href="UMSS.cfm?page=page-index.cfm&template_code=Results&catunique=PUB%5FBodyArmor&category=406&templatename=Home">Body Armor</a></li>
    <li><a href="UMSS.cfm?page=page-index.cfm&template_code=Results&catunique=PUB%5FFlashlightsAndAccessories&category=407&templatename=Home">Flashlights & Accessories</a></li>
    <li><a href="UMSS.cfm?page=page-index.cfm&template_code=Results&catunique=PUB%5FBadgesEmblemsInsignia&category=408&templatename=Home">Badges/Emblems/Insignia</a></li>
    <li><a href="UMSS.cfm?page=page-index.cfm&template_code=Results&catunique=PUB%5FDutyGearBeltsHolsters&category=409&templatename=Home">Duty Gear-Belts-Holsters</a></li>
    <li><a href="UMSS.cfm?page=page-index.cfm&template_code=Results&catunique=PUB%5FOtherEquipment&category=411&templatename=Home">Other Equipment</a></li>
</ul>
<br style="clear: left" />
</div>
 

[Dracov]

Solution:

/* CSS */
 
ul#menu1, ul#menu1 li {
 z-index:200;
}
ul#menu2, ul#menu2 li {
 z-index:100;
}
 
 
/* HTML */
 
<ul id="menu1">
[...]
<ul id="menu2">
[...]