PDA

View Full Version : jQuery Multi Level CSS Menu #2 dropdown hiding under second navigation bar.



Dracov
08-18-2009, 03:36 PM
1) jQuery Multi Level CSS Menu #2

2) http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_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
08-19-2009, 07:04 AM
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
08-19-2009, 01:53 PM
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
08-19-2009, 07:15 PM
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">
[...]