Showing different content in the same Div

Showing different content in the same Div

Hello there

Although i've been using jQuery for some months now, i'm a bit stuck on this small but big task i'm trying to solve on my website.

I've a submenu showing the different continents and then i have a sub-submenu, with their respective countries, each one inside another div and all the data is being fetched from the database using PHP.

For example for the div of Europe:

  1. echo "<div class='nav-column'><a href='#' class='continente'>" .($Cont). "</a></div> ";

So far so good and all the continents are showing. Then i have the div with the European countries: 

  1. <div id="cnt_submenu_" data-id="cont_submenu"   class="submenu_continente active"> 
  2. <span class="close">x</span>
  3. </div>
And then the jQuery code to show the respective div depending if i hover the link of Europe, Africa etc:

  1. var country = $(this).attr('data-id');

  2. //Open and close div with list of countries 

  3. $('.continente').hover(function(){ 
  4.         menuHide('.submenu_continente' + country );
  5.               $('#cnt_submenu' + country ).show(); 
  6.                      },function(){
  7.                           $('#cnt_submenu' + country).mouseleave( function() {
  8.                                   $(this).hide();    
  9.                    });
  10.   });

Unfortunately nothing is showing. What am i missing?

Thanks for pointing me in the right direction.