选择另一个时隐藏悬停的子菜单 JQuery

Question

当鼠标悬停在另一个子菜单上时，如何隐藏子菜单？

在下面的示例中，欧洲和非洲子菜单相互重叠。我希望能够在悬停另一个大陆链接时隐藏每个链接。

$(document).ready(function(){
//Abre menu #Eur1
$('#Europe').hover(function(){
    $('#Eur').show("blind");
    $('#Asi').hide('blind');
    $('#Afr').hide('blind');
},function(){
    $('#Eur').mouseleave(function(){
        $(this).hide("blind");
    });
});

//Abre menu #Afr1
$('#Africa').hover(function(){
    $('#Afr').show("blind");
    $('#Eur').hide('blind');
    $('#Asi').hide('blind');
},function(){
    $('#Afr').mouseleave(function(){
        $(this).hide("blind");
        
    });
});
  
//Abre menu #Asi1
$('#Asia').hover(function(){
    $('#Asi').show("blind");
    $('#Eur').hide('blind');
    $('#Afr').hide('blind');
},function(){
    $('#Asi').mouseleave(function(){
        $(this).hide("blind");         
    });
});

});

body,html {
    background-color: white;
    border: 0;
    outline: 0;
    margin: 0;
    padding: 0;    
    max-width: 100%;    
}

        
/* Estilos da navegação principal`*/  
#container {       
display: block;
margin: 0 auto;
text-align: center;
position: relative;
width: 100%;

}

.nav {
cursor: default;
display: inline-block; 
height: 125px;
position: relative;
top: 50px;
width: auto;
  
    
    -ms-flex-pack: center;
    -ms-display: -ms-flexbox;
}

.nav,
.nav a,
.nav ul,
.nav li,
.nav div {
    border: none;
    padding: 0;
    margin: 0;
    outline: none;
}

.nav a {
    text-decoration: none;
}

.nav li {
    list-style: none;
}

.nav > li {
   
    display: block;
    float: left;
}

.nav > li > a {   
    display: block;
    color: black;
    font-family: 'Oswald', sans-serif;
    font-size: 1em;
    font-weight: 500;
    text-transform: uppercase;
    
    padding: 0 20px;    
    z-index: 510;
    
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition:  all .3s ease;
}

.nav li:hover a {
    background-color:  black;
    color: white;
} 

.nav > li > div {    
    background: white;    
    color: black;
    display: inline-block;
    height: 125px;
    position: absolute;
    top: 30px;
    left: calc(-50vw + 50%);
    opacity: 0;
    overflow: hidden;
    visibility: hidden;
    width: 100vw;   
    z-index: 500;
    
    -webkit-transition: all .3s ease .5s;
    -moz-transition: all .3s ease .5s;
    -o-transition: all .3s ease .5s;
    -ms-transition: all .3s ease .5s;
    transition: all .3s ease .3s;
}

.nav li:hover > div {
    opacity: .7;
    visibility: visible ;
    overflow: hidden;
}

.nav .nav-column {
    /*color: black;*/
    display: inline-block;
    float: left;
    text-align: center;    
    padding: 1%;
    margin: 1%;
    position: relative;
    width: 8%;
}

.nav .nav-column:first-child {
    margin-left: 15%;
}

.nav li div .nav-column a {
    background: white;
    color: black;
    font-family: 'Oswald', sans serif;
    font-size: 0.9em; 
    font-weight: 500;   
    text-transform: uppercase; 
}

.nav li div .nav-column:hover a {
    border-bottom: 1px solid black;
    text-decoration: none; 
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition:  all .3s ease;
} 

#Eur {
    background: black;
    display: none;
    height: auto;
    padding: 0;
    position: absolute;
    margin: 0;
    opacity: .7;
    top: 145px;
    width: 100%;  
    z-index: 660;
}

#Eur ul {    
    display: inline-block;
    float: left;
    padding: 1%;
    margin: 1%;
    position: relative;
    width: 15%;
}

#Eur ul:first-child {
     margin-left: 15%;
}

#Eur ul li {
    display: block;
    list-style: none;
    padding: 2%;
}

#Eur ul li a {
    color: white;
    font-family: 'Oswald', sans serif;
    font-size: 0.9em;
    text-decoration: none;
    text-transform:  uppercase;
    text-align: left;
}

#Eur ul li a:hover {
    border-bottom: 1px solid white;
}

#Afr {
    background: black;
    display: none;
    height: auto;
    padding: 0;
    position: absolute;
    margin: 0;
    opacity: .7;
    text-align: center;
    top: 145px;
    width: 100%;  
    z-index: 660;
}

#Afr ul {
    display: inline-block;    
    padding: 1%;
    margin: 1%;
    position: relative;
    width: 15%;
}

#Afr ul li {
    display: block;
    list-style: none;
    padding: 2%;
    text-align: left;
}

#Afr ul li a {
    color: white;
    font-family: 'Oswald', sans serif;
    font-size: 0.9em;
    text-decoration: none;
    text-transform:  uppercase;
    
}

#Afr ul li a:hover {
    border-bottom: 1px solid white;
}

#Asi {
    background: black;
    border-bottom: 2px solid #d1a559;
    border-top: 2px solid #d1a559;
    display: none;
    height: auto;
    padding: 0;
    position: absolute;
    margin: 0;
    opacity: .7;
    top: 145px;
    width: 100%;  
    z-index: 660;
}

#Asi ul {    
    display: inline-block;
    float: left;
    padding: 1%;
    margin: 1%;
    position: relative;
    width: 15%;
}

#Asi ul:first-child {
     margin-left: 15%;
}

#Asi ul li {
    display: block;
    list-style: none;
    padding: 2%;
}

#Asi ul li a {
    color: white;
    font-family: 'Oswald', sans serif;
    font-size: 0.9em;
    text-decoration: none;
    text-transform:  uppercase;
    text-align: left;
}

#Asi ul li a:hover {
    border-bottom: 1px solid #d1a559;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    
             
        <div id="container">
            <ul class="nav">
                <li><a href="index.php">home</a></li>                 
                <li>
                    <a href="#">destinations <b class="caret">&triangledown;</b></a>
                    <div id="subMenu">                         
                    <div class="nav-column">                         
                        <a href="#" id="Europe">Europe</a>                           
                    </div>
                    <div class="nav-column">                       
                        <a href="#" id="Africa">Africa</a>                         
                    </div>                         
                    <div class="nav-column">                      
                        <a href="" id="Asia">Asia</a>                          
                    </div>                        
                     <div class="nav-column">                      
                         <a href="">Oceania</a>                          
                    </div>                         
                     <div class="nav-column">                      
                         <a href="">North America</a>                          
                    </div>                        
                    <div class="nav-column">                      
                        <a href="">South America</a>                          
                    </div>                    
                    </div>
                </li>
                
                <li><a href="#about">about</a></li>
                <li><a href="#contact">contact</a></li>
            </ul>         
    </div>
        
        
        <div id="Eur" class="active">  
               <ul id="Eur1">
                        <li> <a href="#">Austria</a> </li>
                        <li> <a href="#">Belgium</a> </li>
                        <li> <a href="#">Bosnia & Herzegovina</a> </li> 
                        <li> <a href="#">Bulgaria</a> </li>
                        <li> <a href="#">Croatia</a> </li>
                        <li> <a href="#">Czech Republic</a> </li>
                        <li> <a href="#">Denmark</a> </li> 
                        <li> <a href="#">Estonia</a> </li>
               </ul>
               <ul id="Eur2">                        
                        <li> <a href="#">Finland</a> </li>
                        <li> <a href="#">France</a> </li>
                        <li> <a href="#">Germany</a> </li>
                        <li> <a href="#">Greece</a> </li>
                        <li> <a href="#">Hungary</a> </li>                        
                        <li> <a href="#">Italy</a> </li>
                        <li> <a href="#">Latvia</a> </li>
                        <li> <a href="#">Lithuania</a> </li>
                        <li> <a href="#">Luxembourg</a> </li>
               </ul>
               <ul id="Eur3">                        
                        <li> <a href="#">Macedonia</a> </li>
                        <li> <a href="#">Montenegro</a> </li>
                        <li> <a href="#">Norway</a> </li>
                        <li> <a href="#">Poland</a> </li>
                        <li> <a href="#">Portugal</a> </li>
                        <li> <a href="#">Roménia</a> </li>
                        <li> <a href="#">Russia</a> </li>                        
                        <li> <a href="#">Serbia</a> </li>
               </ul>
               <ul id="Eur4">                        
                        <li> <a href="#">Slovakia</a> </li>
                        <li> <a href="#">Slovenia</a> </li>
                        <li> <a href="#">Spain</a> </li>
                        <li> <a href="#">Sweden</a> </li>
                        <li> <a href="#">Switzerland</a> </li>
                        <li> <a href="#">The Netherlands</a> </li>
                        <li> <a href="#">Turkey</a> </li>
                        <li> <a href="#">Ukraine</a> </li>
                        <li> <a href="#">UK and Ireland</a> </li>                
                    </ul>
                </div>
        <div id="Afr" class="active">
            <ul id="Afr1">
                        <li> <a href="#">Egypt</a></li>
                        <li> <a href="#">Morocco</a> </li>                                                        
                        <li> <a href="#">Namibia</a></li>                            
                        <li> <a href="#">South Africa</a></li>
                        <li> <a href="#">Tunisia</a> </li>
                        <li> <a href="#">Tanzania</a></li>
                        <li> <a href="#">Zambia</a></li>
            </ul>   
        </div>
  <div id="Asi" class="active">
            <ul id="Asi1">
           <li> <a href="#">Bangladesh</a></li>
           <li> <a href="#">Cambodia</a></li>
           <li> <a href="#">China</a></li>
           <li> <a href="#">India</a> </li>
           <li> <a href="#">Indonesia</a></li>
           <li> <a href="#">Japan</a></li>  
           <li> <a href="#">Laos</a></li>
            </ul>
            <ul id="Asi2">
            <li> <a href="#">Myanmar</a></li>
             <li> <a href="#">Nepal</a></li>
             <li> <a href="#">Singapore</a></li>
             <li> <a href="#">Thailand</a></li>
             <li> <a href="#">Tanzania</a></li>
            <li> <a href="#">Uzbekistan</a></li>
            <li> <a href="#">Vietnam</a> </li>
            </ul>  
        </div>
        </body>

Answer 1

您需要将类添加到子菜单。例如：sub。然后在每个悬停事件中使用$('.sub').stop().hide("blind"); 首先隐藏任何可见的子菜单。顺便说一句，你的代码和 html 是一团糟。学习使用类以及如何重用代码来制作正确的导航。

$(document).ready(function(){

//Abre menu #Eur1
$('#Europe').hover(function(){
   $('.sub').stop().hide("blind");
   $('#Eur').show("blind");
},function(){
    $('#Eur').mouseleave(function(){
        $(this).hide("blind");
    });
});

//Abre menu #Afr1
$('#Africa').hover(function(event){
    $('.sub').stop().hide("blind");
    $('#Afr').show("blind");
    event.stopPropagation;
},function(){
    $('#Afr').mouseleave(function(event){
        $(this).hide("blind");
        event.stopPropagation;
    });
});
});

body,html {
    background-color: white;
    border: 0;
    outline: 0;
    margin: 0;
    padding: 0;    
    max-width: 100%;    
}

        
/* Estilos da navegação principal`*/  
#container {       
display: block;
margin: 0 auto;
text-align: center;
position: relative;
width: 100%;

}

.nav {
cursor: default;
display: inline-block; 
height: 125px;
position: relative;
top: 50px;
width: auto;
  
    
    -ms-flex-pack: center;
    -ms-display: -ms-flexbox;
}

.nav,
.nav a,
.nav ul,
.nav li,
.nav div {
    border: none;
    padding: 0;
    margin: 0;
    outline: none;
}

.nav a {
    text-decoration: none;
}

.nav li {
    list-style: none;
}

.nav > li {
   
    display: block;
    float: left;
}

.nav > li > a {   
    display: block;
    color: black;
    font-family: 'Oswald', sans-serif;
    font-size: 1em;
    font-weight: 500;
    text-transform: uppercase;
    
    padding: 0 20px;    
    z-index: 510;
    
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition:  all .3s ease;
}

.nav li:hover a {
    background-color:  black;
    color: white;
} 

.nav > li > div {    
    background: white;    
    color: black;
    display: inline-block;
    height: 125px;
    position: absolute;
    top: 30px;
    left: calc(-50vw + 50%);
    opacity: 0;
    overflow: hidden;
    visibility: hidden;
    width: 100vw;   
    z-index: 500;
    
    -webkit-transition: all .3s ease .5s;
    -moz-transition: all .3s ease .5s;
    -o-transition: all .3s ease .5s;
    -ms-transition: all .3s ease .5s;
    transition: all .3s ease .3s;
}

.nav li:hover > div {
    opacity: .7;
    visibility: visible ;
    overflow: hidden;
}

.nav .nav-column {
    /*color: black;*/
    display: inline-block;
    float: left;
    text-align: center;    
    padding: 1%;
    margin: 1%;
    position: relative;
    width: 8%;
}

.nav .nav-column:first-child {
    margin-left: 15%;
}

.nav li div .nav-column a {
    background: white;
    color: black;
    font-family: 'Oswald', sans serif;
    font-size: 0.9em; 
    font-weight: 500;   
    text-transform: uppercase; 
}

.nav li div .nav-column:hover a {
    border-bottom: 1px solid black;
    text-decoration: none; 
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition:  all .3s ease;
} 

#Eur {
    background: black;
    display: none;
    height: auto;
    padding: 0;
    position: absolute;
    margin: 0;
    opacity: .7;
    top: 145px;
    width: 100%;  
    z-index: 660;
}

#Eur ul {    
    display: inline-block;
    float: left;
    padding: 1%;
    margin: 1%;
    position: relative;
    width: 15%;
}

#Eur ul:first-child {
     margin-left: 15%;
}

#Eur ul li {
    display: block;
    list-style: none;
    padding: 2%;
}

#Eur ul li a {
    color: white;
    font-family: 'Oswald', sans serif;
    font-size: 0.9em;
    text-decoration: none;
    text-transform:  uppercase;
    text-align: left;
}

#Eur ul li a:hover {
    border-bottom: 1px solid white;
}

#Afr {
    background: black;
    display: none;
    height: auto;
    padding: 0;
    position: absolute;
    margin: 0;
    opacity: .7;
    text-align: center;
    top: 145px;
    width: 100%;  
    z-index: 660;
}

#Afr ul {
    display: inline-block;    
    padding: 1%;
    margin: 1%;
    position: relative;
    width: 15%;
}

#Afr ul li {
    display: block;
    list-style: none;
    padding: 2%;
    text-align: left;
}

#Afr ul li a {
    color: white;
    font-family: 'Oswald', sans serif;
    font-size: 0.9em;
    text-decoration: none;
    text-transform:  uppercase;
    
}

#Afr ul li a:hover {
    border-bottom: 1px solid white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    
             
        <div id="container">
            <ul class="nav">
                <li><a href="index.php">home</a></li>                 
                <li>
                    <a href="#">destinations <b class="caret">&triangledown;</b></a>
                    <div id="subMenu">                         
                    <div class="nav-column">                         
                        <a href="#" id="Europe">Europe</a>                           
                    </div>
                    <div class="nav-column">                       
                        <a href="#" id="Africa">Africa</a>                         
                    </div>                         
                    <div class="nav-column">                      
                        <a href="">Asia</a>                          
                    </div>                        
                     <div class="nav-column">                      
                         <a href="">Oceania</a>                          
                    </div>                         
                     <div class="nav-column">                      
                         <a href="">North America</a>                          
                    </div>                        
                    <div class="nav-column">                      
                        <a href="">South America</a>                          
                    </div>                    
                    </div>
                </li>
                
                <li><a href="#about">about</a></li>
                <li><a href="#contact">contact</a></li>
            </ul>         
    </div>
        
        
        <div id="Eur" class="sub">  
               <ul id="Eur1">
                        <li> <a href="#">Austria</a> </li>
                        <li> <a href="#">Belgium</a> </li>
                        <li> <a href="#">Bosnia & Herzegovina</a> </li>
                        <li> <a href="#">Bulgaria</a> </li>
                        <li> <a href="#">Croatia</a> </li>
                        <li> <a href="#">Czech Republic</a> </li>
                        <li> <a href="#">Denmark</a> </li> 
                        <li> <a href="#">Estonia</a> </li>
               </ul>
               <ul id="Eur2">                        
                        <li> <a href="#">Finland</a> </li>
                        <li> <a href="#">France</a> </li>
                        <li> <a href="#">Germany</a> </li>
                        <li> <a href="#">Greece</a> </li>
                        <li> <a href="#">Hungary</a> </li>                        
                        <li> <a href="#">Italy</a> </li>
                        <li> <a href="#">Latvia</a> </li>
                        <li> <a href="#">Lithuania</a> </li>
                        <li> <a href="#">Luxembourg</a> </li>
               </ul>
               <ul id="Eur3">                        
                        <li> <a href="#">Macedonia</a> </li>
                        <li> <a href="#">Montenegro</a> </li>
                        <li> <a href="#">Norway</a> </li>
                        <li> <a href="#">Poland</a> </li>
                        <li> <a href="#">Portugal</a> </li>
                        <li> <a href="#">Roménia</a> </li>
                        <li> <a href="#">Russia</a> </li>                        
                        <li> <a href="#">Serbia</a> </li>
               </ul>
               <ul id="Eur4">                        
                        <li> <a href="#">Slovakia</a> </li>
                        <li> <a href="#">Slovenia</a> </li>
                        <li> <a href="#">Spain</a> </li>
                        <li> <a href="#">Sweden</a> </li>
                        <li> <a href="#">Switzerland</a> </li>
                        <li> <a href="#">The Netherlands</a> </li>
                        <li> <a href="#">Turkey</a> </li>
                        <li> <a href="#">Ukraine</a> </li>
                        <li> <a href="#">UK and Ireland</a> </li>                
                    </ul>
                </div>
        <div id="Afr" class="sub">
            <ul id="Afr1">
                        <li> <a href="#">Egypt</a></li>
                        <li> <a href="#">Morocco</a> </li>                                                        
                        <li> <a href="#">Namibia</a></li>                            
                        <li> <a href="#">South Africa</a></li>
                        <li> <a href="#">Tunisia</a> </li>
                        <li> <a href="#">Tanzania</a></li>
                        <li> <a href="#">Zambia</a></li>
            </ul>   
        </div>
        </body>

Answer 2

通过向每个子菜单添加一个类，然后在每次新悬停时显示所选 ID 之前隐藏所有该类：

更新：

用另一种 JS 函数调整答案以循环浏览并隐藏所有子菜单，除非它是由 HTML 中的菜单数据属性命名的子菜单。注意 'nav-column' html div 中的新 data-sub='Eur' 属性，它们指向子菜单 ID 名称。

$(document).ready(function() {

  $('.nav-column').mouseover(function() {
    var submenu = $('a', this).data('sub'); // get the pointing to 'data-sub' id name
    $('.retract').each(function() { // cycle through all the submenus
      var $this = $(this);
      if ($this.attr('id') === submenu) {
        $this.show('blind'); // if it's the point to submenu then show
      } else {
        $this.hide('blind'); // otherwise hide
      }
    });
  });

  $('.nav-column').mouseleave(function() {
    $('.retract').hide("blind");
  });


  //Abre menu #Eur1
  /*  $('#Europe').hover(function() {
      $('.retract').hide("blind");
      $('#Eur').show("blind");
    }, function() {
      $('#Eur').mouseleave(function() {
        $(this).hide("blind");
      });
    });

    //Abre menu #Afr1
    $('#Africa').hover(function(event) {
      $('.retract').hide("blind");
      $('#Afr').show("blind");
      event.stopPropagation;
    }, function() {
      $('#Afr').mouseleave(function(event) {
        $(this).hide("blind");
        event.stopPropagation;
      });
    }); */





});

body,
html {
  background-color: white;
  border: 0;
  outline: 0;
  margin: 0;
  padding: 0;
  max-width: 100%;
}
/* Estilos da navegação principal`*/

#container {
  display: block;
  margin: 0 auto;
  text-align: center;
  position: relative;
  width: 100%;
}
.nav {
  cursor: default;
  display: inline-block;
  height: 125px;
  position: relative;
  top: 50px;
  width: auto;
  -ms-flex-pack: center;
  -ms-display: -ms-flexbox;
}
.nav,
.nav a,
.nav ul,
.nav li,
.nav div {
  border: none;
  padding: 0;
  margin: 0;
  outline: none;
}
.nav a {
  text-decoration: none;
}
.nav li {
  list-style: none;
}
.nav > li {
  display: block;
  float: left;
}
.nav > li > a {
  display: block;
  color: black;
  font-family: 'Oswald', sans-serif;
  font-size: 1em;
  font-weight: 500;
  text-transform: uppercase;
  padding: 0 20px;
  z-index: 510;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -o-transition: all .3s ease;
  -ms-transition: all .3s ease;
  transition: all .3s ease;
}
.nav li:hover a {
  background-color: black;
  color: white;
}
.nav > li > div {
  background: white;
  color: black;
  display: inline-block;
  height: 125px;
  position: absolute;
  top: 30px;
  left: calc(-50vw + 50%);
  opacity: 0;
  overflow: hidden;
  visibility: hidden;
  width: 100vw;
  z-index: 500;
  -webkit-transition: all .3s ease .5s;
  -moz-transition: all .3s ease .5s;
  -o-transition: all .3s ease .5s;
  -ms-transition: all .3s ease .5s;
  transition: all .3s ease .3s;
}
.nav li:hover > div {
  opacity: .7;
  visibility: visible;
  overflow: hidden;
}
.nav .nav-column {
  /*color: black;*/
  display: inline-block;
  float: left;
  text-align: center;
  padding: 1%;
  margin: 1%;
  position: relative;
  width: 8%;
}
.nav .nav-column:first-child {
  margin-left: 15%;
}
.nav li div .nav-column a {
  background: white;
  color: black;
  font-family: 'Oswald', sans serif;
  font-size: 0.9em;
  font-weight: 500;
  text-transform: uppercase;
}
.nav li div .nav-column:hover a {
  border-bottom: 1px solid black;
  text-decoration: none;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -o-transition: all .3s ease;
  -ms-transition: all .3s ease;
  transition: all .3s ease;
}
#Eur {
  background: black;
  display: none;
  height: auto;
  padding: 0;
  position: absolute;
  margin: 0;
  opacity: .7;
  top: 145px;
  width: 100%;
  z-index: 660;
}
#Eur ul {
  display: inline-block;
  float: left;
  padding: 1%;
  margin: 1%;
  position: relative;
  width: 15%;
}
#Eur ul:first-child {
  margin-left: 15%;
}
#Eur ul li {
  display: block;
  list-style: none;
  padding: 2%;
}
#Eur ul li a {
  color: white;
  font-family: 'Oswald', sans serif;
  font-size: 0.9em;
  text-decoration: none;
  text-transform: uppercase;
  text-align: left;
}
#Eur ul li a:hover {
  border-bottom: 1px solid white;
}
#Afr {
  background: black;
  display: none;
  height: auto;
  padding: 0;
  position: absolute;
  margin: 0;
  opacity: .7;
  text-align: center;
  top: 145px;
  width: 100%;
  z-index: 660;
}
#Afr ul {
  display: inline-block;
  padding: 1%;
  margin: 1%;
  position: relative;
  width: 15%;
}
#Afr ul li {
  display: block;
  list-style: none;
  padding: 2%;
  text-align: left;
}
#Afr ul li a {
  color: white;
  font-family: 'Oswald', sans serif;
  font-size: 0.9em;
  text-decoration: none;
  text-transform: uppercase;
}
#Afr ul li a:hover {
  border-bottom: 1px solid white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>


  <div id="container">
    <ul class="nav">
      <li><a href="index.php">home</a>
      </li>
      <li>
        <a href="#">destinations <b class="caret">&triangledown;</b></a>
        <div id="subMenu">
          <div class="nav-column">
            <a href="#" id="Europe" data-sub="Eur">Europe</a> 
          </div>
          <div class="nav-column">
            <a href="#" id="Africa" data-sub="Afr">Africa</a> 
          </div>
          <div class="nav-column">
            <a href="">Asia</a> 
          </div>
          <div class="nav-column">
            <a href="">Oceania</a> 
          </div>
          <div class="nav-column">
            <a href="">North America</a> 
          </div>
          <div class="nav-column">
            <a href="">South America</a> 
          </div>
        </div>
      </li>

      <li><a href="#about">about</a>
      </li>
      <li><a href="#contact">contact</a>
      </li>
    </ul>
  </div>


  <div id="Eur" class="retract">
    <ul id="Eur1">
      <li> <a href="#">Austria</a> 
      </li>
      <li> <a href="#">Belgium</a> 
      </li>
      <li> <a href="#">Bosnia & Herzegovina</a> 
      </li>
      <li> <a href="#">Bulgaria</a> 
      </li>
      <li> <a href="#">Croatia</a> 
      </li>
      <li> <a href="#">Czech Republic</a> 
      </li>
      <li> <a href="#">Denmark</a> 
      </li>
      <li> <a href="#">Estonia</a> 
      </li>
    </ul>
    <ul id="Eur2">
      <li> <a href="#">Finland</a> 
      </li>
      <li> <a href="#">France</a> 
      </li>
      <li> <a href="#">Germany</a> 
      </li>
      <li> <a href="#">Greece</a> 
      </li>
      <li> <a href="#">Hungary</a> 
      </li>
      <li> <a href="#">Italy</a> 
      </li>
      <li> <a href="#">Latvia</a> 
      </li>
      <li> <a href="#">Lithuania</a> 
      </li>
      <li> <a href="#">Luxembourg</a> 
      </li>
    </ul>
    <ul id="Eur3">
      <li> <a href="#">Macedonia</a> 
      </li>
      <li> <a href="#">Montenegro</a> 
      </li>
      <li> <a href="#">Norway</a> 
      </li>
      <li> <a href="#">Poland</a> 
      </li>
      <li> <a href="#">Portugal</a> 
      </li>
      <li> <a href="#">Roménia</a> 
      </li>
      <li> <a href="#">Russia</a> 
      </li>
      <li> <a href="#">Serbia</a> 
      </li>
    </ul>
    <ul id="Eur4" class="retract">
      <li> <a href="#">Slovakia</a> 
      </li>
      <li> <a href="#">Slovenia</a> 
      </li>
      <li> <a href="#">Spain</a> 
      </li>
      <li> <a href="#">Sweden</a> 
      </li>
      <li> <a href="#">Switzerland</a> 
      </li>
      <li> <a href="#">The Netherlands</a> 
      </li>
      <li> <a href="#">Turkey</a> 
      </li>
      <li> <a href="#">Ukraine</a> 
      </li>
      <li> <a href="#">UK and Ireland</a> 
      </li>
    </ul>
  </div>
  <div id="Afr" class="retract">
    <ul id="Afr1">
      <li> <a href="#">Egypt</a>
      </li>
      <li> <a href="#">Morocco</a> 
      </li>
      <li> <a href="#">Namibia</a>
      </li>
      <li> <a href="#">South Africa</a>
      </li>
      <li> <a href="#">Tunisia</a> 
      </li>
      <li> <a href="#">Tanzania</a>
      </li>
      <li> <a href="#">Zambia</a>
      </li>
    </ul>
  </div>
</body>