Menu Navigation Dropdown

[DizzyDan]

This is a WordPress website: I have a main menu nav that works and am trying to add a second navigation but the drop downs do not work. In the main nav the item "Community" has a drop down with item "Forums", this nav works fine. In the second nav there is an item called "insurance" i have 2 sub items "Medicare" and "Auto Home" these don't show up. the live test site is http://amac.444web.com/ Below is the code header.php

<div class="navWrapper">			 <?php wp_nav_menu( array( 'theme_location' => 'menu-1' ) ); ?>   </div>   <div class="navWrapper">	<?php wp_nav_menu( array( 'theme_location' => 'menu-5' ) ); ?>   </div>

style.css

/*----------------------------------- Main Navigation-----------------------------------*/.navWrapper{height:55px;margin-bottom:15px;padding-left:5px;position: relative;	z-index: 1000;}#menu-navigation-bar  {list-style:none;border: 1px solid #062A5F;border-top: none;border-bottom: none;}#menu-navigation-bar li{position:relative;border-right:1px solid #215398;float: left;}#menu-navigation-bar li a{display:block;height:55px;font-family: Georgia, "Times New Roman", Times, serif;color:#fff;font-size:18px;text-decoration:none;text-shadow: 1px 1px 0 #03224F;border-right:1px solid #05224C;padding: 0 12px 0 13px;line-height: 54px;}#menu-navigation-bar li a:hover{background: url(/wp-content/themes/AMAC/images/mainNav-onPage-bg.png) repeat-x top left;text-shadow: 1px 1px 0 #9F131C;}#menu-navigation-bar li.current-menu-item, #menu-navigation-bar li.current-menu-ancestor {	background: url("/wp-content/themes/AMAC/images/mainNav-onPage.png") repeat-x scroll left bottom #437AC7;}#menu-navigation-bar ul {	left: 0;	position: absolute;	top: 100%;	visibility: hidden;	width: 220px;} /*-----------------------------------Sub Navigation-----------------------------------*//*** ESSENTIAL STYLES ***/#menu-navigation-bar ul{list-style:none;background:#7c7d81;width:260px;position:absolute;top:54px;left:0;z-index:100;border-top: 1px solid #7C7D81;}#menu-navigation-bar ul li{float:none;border:none;} #menu-navigation-bar ul li a {display:block;border-bottom:1px solid #949494;font-family:Georgia, "Times New Roman", Times, serif;font-size:18px;color:#fff;padding:10px;text-decoration:none;height:inherit;height:auto;text-align:left;line-height:normal;text-shadow: 1px 1px 0 #555;border-right: medium none;}#menu-navigation-bar ul li a:hover{background:#d2181f;text-shadow: 1px 1px 0 #9F131C;}#menu-navigation-bar ul ul {left: 100%; top: 0;}#menu-navigation-bar ul li:hover > ul {visibility: visible;}  /*-----------------------------------Second Navigation-----------------------------------*/.navWrapper{height:55px;margin-bottom:15px;padding-left:5px;position: relative;	z-index: 1000;}#menu-benefits  {list-style:none;border: 1px solid #062A5F;border-top: none;border-bottom: none;}#menu-benefits li{position:relative;border-right:1px solid #215398;float: left;}#menu-benefits li a{display:block;height:55px;font-family: Georgia, "Times New Roman", Times, serif;color:#fff;font-size:18px;text-decoration:none;text-shadow: 1px 1px 0 #03224F;border-right:1px solid #05224C;padding: 0 12px 0 13px;line-height: 54px;}#menu-benefits li a:hover{background: url(/wp-content/themes/AMAC/images/mainNav-onPage-bg.png) repeat-x top left;text-shadow: 1px 1px 0 #9F131C;}#menu-benefits li.current-menu-item, #menu-benefits li.current-menu-ancestor {	background: url("/wp-content/themes/AMAC/images/mainNav-onPage.png") repeat-x scroll left bottom #437AC7;}#menu-benefits ul {	left: 0;	position: absolute;	top: 100%;	visibility: hidden;	width: 220px;}   /*-----------------------------------Sub Navigation-----------------------------------*//*** ESSENTIAL STYLES ***/ #menu-benefits ul{list-style:none;background:#7c7d81;width:260px;position:absolute;top:54px;left:0;z-index:100;border-top: 1px solid #7C7D81;}#menu-benefits ul li{float:none;border:none;} #menu-benefits ul li a {display:block;border-bottom:1px solid #949494;font-family:Georgia, "Times New Roman", Times, serif;font-size:18px;color:#fff;padding:10px;text-decoration:none;height:inherit;height:auto;text-align:left;line-height:normal;text-shadow: 1px 1px 0 #555;border-right: medium none;} #menu-benefits ul li a:hover{background:#d2181f;text-shadow: 1px 1px 0 #9F131C;}#menu-benefits ul ul {left: 100%; top: 0;}#menu-benefits ul li:hover > ul {visibility: visible;}

Edited May 15, 2013 by DizzyDan

[newseed]

I have not put my finger on what the actual problem is but I think the visibility: visible is not being applied via js. I would make a test by switching the two menus in you php to see if the opposite happens. (ie. menu-1 is now menu-5 ----- and menu-5 is now menu-1). If insurance still does not work yet community does then it requires some js to identify the new id name in your ul list. <div class="navWrapper"> <?php wp_nav_menu( array( 'theme_location' => 'menu-5' ) ); ?> </div> <div class="navWrapper"> <?php wp_nav_menu( array( 'theme_location' => 'menu-1' ) ); ?> </div>

Edited May 16, 2013 by newseed

[DizzyDan]

I believe you nailed it but I'm not sure what to add to this code (I'm pretty sure this is where I need to add the ID)

// nav bar$("ul#menu-navigation-bar li").hover(function(){   	    $(this).addClass("hover");	    $('ul:first',this).css('visibility', 'visible');       }, function(){   	    $(this).removeClass("hover");	    $('ul:first',this).css('visibility', 'hidden');       });       $("ul#menu-navigation-bar li ul li:has(ul)").find("a:first").append(" » ");		});

[newseed]

Just duplicate that block of code you've just provided and copy it below. You would then edit that block of code by changing menu-navigation-bar to menu-benefits-container (2 places)

[DizzyDan]

I tried is 3 different ways none of which are working. I believe below to be correct... I must be missing something tho.

$(function(){	$('.footerInside a.top').click(function(){   $('html, body').animate({scrollTop: '0px'}, 1000);   return false;});$('.shareWrapper2').containedStickyScroll();$('ul.sf-menu').superfish();// nav bar$("ul#menu-navigation-bar li").hover(function(){   	    $(this).addClass("hover");	    $('ul:first',this).css('visibility', 'visible');       }, function(){   	    $(this).removeClass("hover");	    $('ul:first',this).css('visibility', 'hidden');       });       $("ul#menu-navigation-bar li ul li:has(ul)").find("a:first").append(" » ");		});// nav bar 2$("ul#menu-benefits li").hover(function(){   	    $(this).addClass("hover");	    $('ul:first',this).css('visibility', 'visible');       }, function(){   	    $(this).removeClass("hover");	    $('ul:first',this).css('visibility', 'hidden');       });       $("ul#menu-benefits li ul li:has(ul)").find("a:first").append(" » ");		});

[dsonesuk]

OR remove ID ref and replace with class name 'menu' soul#menu-navigation-barbecomesul.menuas the class name 'menu' refers to the same parent UL element. no need to duplicate same css/jquery code for each menu

[DizzyDan]

Now I'm really confused I deleted the .js file that had this code in it just to see what would happen and the drop down remains unchanged (the drop down still works for community and not for insurance) Mind you this wasn't a theme I built it is a theme I am trying to edit for a client. I created a test site on my server with the theme files they provided. I feel that I'm just missing something very simple but the other half of me worries that I am going to have to just build this menu from scratch.

Edited May 16, 2013 by DizzyDan

[dsonesuk]

just replaced this

$(function(){    $("ul#menu-navigation-bar li").hover(function(){            $(this).addClass("hover");        $('ul:first',this).css('visibility', 'visible');        }, function(){            $(this).removeClass("hover");        $('ul:first',this).css('visibility', 'hidden');        });        $("ul#menu-navigation-bar li ul li:has(ul)").find("a:first").append(" » ");});

with this, and it works fine

$(function(){    $("ul.menu li").hover(function(){    	    $(this).addClass("hover");	    $('ul:first',this).css('visibility', 'visible');        }, function(){    	    $(this).removeClass("hover");	    $('ul:first',this).css('visibility', 'hidden');        });        $("ul.menu li ul li:has(ul)").find("a:first").append(" » ");});

[newseed]

Good solution.