<nav>
<div class="menu-item">
<h4 style="text-align: center;"><a href="#">Africa</a></h4>
 <ul>
<li><a href="https://surveyearth.ning.com/hubs/africa-land-surveyors/angola" rel="ajaxpanel">Angola</a></li>
<li><a href="https://surveyearth.ning.com/hubs/africa-land-surveyors/algeria" rel="ajaxpanel">Algeria</a></li>
<li><a href="https://surveyearth.ning.com/hubs/africa-land-surveyors/benin" rel="ajaxpanel">Benin</a></li>
<li><a href="https://surveyearth.ning.com/hubs/africa-land-surveyors/botswana" rel="ajaxpanel">Botswana</a></li>
<li><a href="https://surveyearth.ning.com/hubs/africa-land-surveyors/cameroon" rel="ajaxpanel">Cameroon</a></li>
<li><a href="https://surveyearth.ning.com/hubs/africa-land-surveyors/ethiopia" rel="ajaxpanel">Ethiopia</a></li>
<li><a href="https://surveyearth.ning.com/hubs/africa-land-surveyors/egypt" rel="ajaxpanel">Egypt</a></li>
<li><a href="https://surveyearth.ning.com/hubs/africa-land-surveyors/ghana" rel="ajaxpanel">Ghana</a></li>
<li><a href="https://surveyearth.ning.com/hubs/africa-land-surveyors/ivory-coast" rel="ajaxpanel">Ivory Coast</a></li>
<li><a href="https://surveyearth.ning.com/hubs/africa-land-surveyors/liberia" rel="ajaxpanel">Liberia</a></li>
<li><a href="https://surveyearth.ning.com/hubs/africa-land-surveyors/kenya" rel="ajaxpanel">Kenya</a></li>
<li><a href="https://surveyearth.ning.com/hubs/africa-land-surveyors/malawi" rel="ajaxpanel">Malawi</a></li>
<li><a href="https://surveyearth.ning.com/hubs/africa-land-surveyors/madagascar" rel="ajaxpanel">Madagascar</a></li>
<li><a href="https://surveyearth.ning.com/hubs/africa-land-surveyors/morocco" rel="ajaxpanel">Morocco</a></li>
<li><a href="https://surveyearth.ning.com/hubs/africa-land-surveyors/mozambique" rel="ajaxpanel">Mozambique</a></li>
<li><a href="https://surveyearth.ning.com/hubs/africa-land-surveyors/namibia" rel="ajaxpanel">Namibia</a></li>
<li><a href="https://surveyearth.ning.com/hubs/africa-land-surveyors/nigeria" rel="ajaxpanel">Nigeria</a></li>
<li><a href="https://surveyearth.ning.com/hubs/africa-land-surveyors/uganda" rel="ajaxpanel">Uganda</a></li>
<li><a href="https://surveyearth.ning.com/hubs/africa-land-surveyors/rwanda" rel="ajaxpanel">Rwanda</a></li>
<li><a href="https://surveyearth.ning.com/hubs/africa-land-surveyors/south-africa" rel="ajaxpanel">South Africa</a></li>
<li><a href="https://surveyearth.ning.com/hubs/africa-land-surveyors/senegal" rel="ajaxpanel">Senegal</a></li>
<li><a href="https://surveyearth.ning.com/hubs/africa-land-surveyors/sudan" rel="ajaxpanel">Sudan</a></li>
<li><a href="https://surveyearth.ning.com/hubs/africa-land-surveyors/zimbabwe" rel="ajaxpanel">Zimbabwe</a></li>
</ul>
</div>
<div class="menu-item">
<h4 style="text-align: center;"><a href="#">Asia</a></h4>
<ul>
<li><a href="https://surveyearth.ning.com/hubs/asia/afghanistan" rel="ajaxpanel">Afghanistan</a></li>
<li><a href="https://surveyearth.ning.com/hubs/asia/china" rel="ajaxpanel">China</a></li>
<li><a href="https://surveyearth.ning.com/hubs/asia/japan" rel="ajaxpanel">Japan</a></li>
<li><a href="https://surveyearth.ning.com/hubs/asia/india" rel="ajaxpanel">India</a></li>
<li><a href="https://surveyearth.ning.com/hubs/asia/sri-lanka" rel="ajaxpanel">Sri Lanka</a></li>
<li><a href="https://surveyearth.ning.com/hubs/asia/philippines" rel="ajaxpanel">Philippines</a></li>
<li><a href="https://surveyearth.ning.com/hubs/asia/malaysia" rel="ajaxpanel">Malaysia</a></li>
<li><a href="https://surveyearth.ning.com/hubs/asia/singapore" rel="ajaxpanel">Singapore</a></li>
<li><a href="https://surveyearth.ning.com/hubs/asia/taiwan" rel="ajaxpanel">Taiwan</a></li>
<li><a href="https://surveyearth.ning.com/hubs/asia/thailand" rel="ajaxpanel">Thailand</a></li>
<li><a href="https://surveyearth.ning.com/hubs/asia/nepal" rel="ajaxpanel">Nepal</a></li>
<li><a href="https://surveyearth.ning.com/hubs/asia/pakistan" rel="ajaxpanel">Pakistan</a></li>
</ul>
</div>
  <div class="menu-item">
<h4 style="text-align: center;"><a href="#">Europe</a></h4>
<ul>
    <li>For Calflex, design is essential and has lead to the creation of the Carimali range, a modern, avant-garde line. <strong>Find out more &gt;</strong></li>
</ul>
</div>
  <div class="menu-item">
<h4 style="text-align: center;"><a href="#">North America</a></h4>
<ul>
    <li>For Calflex, design is essential and has lead to the creation of the Carimali range, a modern, avant-garde line. <strong>Find out more &gt;</strong></li>
</ul>
</div>
  <div class="menu-item">
<h4 style="text-align: center;"><a href="#">South America</a></h4>
<ul>
<li><a href="https://surveyearth.ning.com/hubs/south-america/brazil" rel="ajaxpanel">Brazil</a></li>
 
<li><a href="https://surveyearth.ning.com/hubs/south-america/colombia" rel="ajaxpanel">Colombia</a></li>
 
<li><a href="https://surveyearth.ning.com/hubs/south-america/argentina" rel="ajaxpanel">Argentina</a></li>
 
<li><a href="https://surveyearth.ning.com/hubs/south-america/peru" rel="ajaxpanel">Peru</a></li>
 
<li><a href="https://surveyearth.ning.com/hubs/south-america/venezuela" rel="ajaxpanel">Venezuela</a></li>
 
<li><a href="https://surveyearth.ning.com/hubs/south-america/chile" rel="ajaxpanel">Chile</a></li>
 
<li><a href="https://surveyearth.ning.com/hubs/south-america/ecuador" rel="ajaxpanel">Ecuador</a></li>
 
<li><a href="https://surveyearth.ning.com/hubs/south-america/bolivia" rel="ajaxpanel">Bolivia</a></li>
 
<li><a href="https://surveyearth.ning.com/hubs/south-america/paraguay" rel="ajaxpanel">Paraguay</a></li>
 
<li><a href="https://surveyearth.ning.com/hubs/south-america/uruguay" rel="ajaxpanel">Uruguay</a></li>
 
<li><a href="https://surveyearth.ning.com/hubs/south-america/guyana" rel="ajaxpanel">Guyana</a></li>
 
<li><a href="https://surveyearth.ning.com/hubs/south-america/suriname" rel="ajaxpanel">Suriname</a></li>
 
<li><a href="https://surveyearth.ning.com/hubs/south-america/french-guiana" rel="ajaxpanel">French Guiana</a></li>
 
<li><a href="https://surveyearth.ning.com/hubs/south-america/falkland-islands" rel="ajaxpanel">Falkland Islands</a></li>
</ul>
</div>
<div class="menu-item">
<h4 style="text-align: center;"><a href="#">USA</a></h4>
 <ul>
<li><a href="https://surveyearth.ning.com/hubs/usa-surveyors/arizona" rel="ajaxpanel">Arizona</a></li>
 
<li><a href="https://surveyearth.ning.com/hubs/usa-surveyors/alabama" rel="ajaxpanel">Alabama</a></li>
 
<li><a href="https://surveyearth.ning.com/hubs/usa-surveyors/alaska" rel="ajaxpanel">Alaska</a></li>
 
<li><a href="https://surveyearth.ning.com/hubs/usa-surveyors/arkansas" rel="ajaxpanel">Arkansas</a></li>
 
<li><a href="https://surveyearth.ning.com/hubs/usa-surveyors/california" rel="ajaxpanel">California</a></li>
 
<li><a href="https://surveyearth.ning.com/hubs/usa-surveyors/connecticut" rel="ajaxpanel">Connecticut</a></li>
 
<li><a href="https://surveyearth.ning.com/hubs/usa-surveyors/delaware" rel="ajaxpanel">Delaware</a></li>
 
<li><a href="https://surveyearth.ning.com/hubs/usa-surveyors/florida" rel="ajaxpanel">Florida</a></li>
 
<li><a href="https://surveyearth.ning.com/hubs/usa-surveyors/georgia" rel="ajaxpanel">Georgia</a></li>
 
<li><a href="https://surveyearth.ning.com/hubs/usa-surveyors/hawaii" rel="ajaxpanel">Hawaii</a></li>
 
<li><a href="https://surveyearth.ning.com/hubs/usa-surveyors/illinois" rel="ajaxpanel">Illinois</a></li>
 
<li><a href="https://surveyearth.ning.com/hubs/usa-surveyors/indiana" rel="ajaxpanel">Indiana</a></li>
 
<li><a href="https://surveyearth.ning.com/hubs/usa-surveyors/iowa" rel="ajaxpanel">Iowa</a></li>
 
<li><a href="https://surveyearth.ning.com/hubs/usa-surveyors/kansas" rel="ajaxpanel">Kansas</a></li>
 
<li><a href="https://surveyearth.ning.com/hubs/usa-surveyors/kentucky" rel="ajaxpanel">Kentucky</a></li>
 
<li><a href="https://surveyearth.ning.com/hubs/usa-surveyors/maine" rel="ajaxpanel">Maine</a></li>
 
<li><a href="https://surveyearth.ning.com/hubs/usa-surveyors/maryland" rel="ajaxpanel">Maryland</a></li>
 
<li><a href="https://surveyearth.ning.com/hubs/usa-surveyors/massachusetts" rel="ajaxpanel">Massachusetts</a></li>
 
<li><a href="https://surveyearth.ning.com/hubs/usa-surveyors/michigan" rel="ajaxpanel">Michigan</a></li>
 
<li><a href="https://surveyearth.ning.com/hubs/usa-surveyors/minnesota" rel="ajaxpanel">Minnesota</a></li>
 
<li><a href="https://surveyearth.ning.com/hubs/usa-surveyors/missouri" rel="ajaxpanel">Missouri</a></li>
 
<li><a href="https://surveyearth.ning.com/hubs/usa-surveyors/montana" rel="ajaxpanel">Montana</a></li>
 
<li><a href="https://surveyearth.ning.com/hubs/usa-surveyors/nebraska" rel="ajaxpanel">Nebraska</a></li>
 
<li><a href="https://surveyearth.ning.com/hubs/usa-surveyors/nevada" rel="ajaxpanel">Nevada</a></li>
 
<li><a href="https://surveyearth.ning.com/hubs/usa-surveyors/new-hampshire" rel="ajaxpanel">New Hampshire</a></li>
 
<li><a href="https://surveyearth.ning.com/hubs/usa-surveyors/new-york" rel="ajaxpanel">New York</a></li>
 
<li><a href="https://surveyearth.ning.com/hubs/usa-surveyors/north-carolina" rel="ajaxpanel">North Carolina</a></li>
 
<li><a href="https://surveyearth.ning.com/hubs/usa-surveyors/north-dakota" rel="ajaxpanel">North Dakota</a></li>
 
<li><a href="https://surveyearth.ning.com/hubs/usa-surveyors/new-mexico" rel="ajaxpanel">New Mexico</a></li>
 
<li><a href="https://surveyearth.ning.com/hubs/usa-surveyors/oklahoma" rel="ajaxpanel">Oklahoma</a></li>
 
<li><a href="https://surveyearth.ning.com/hubs/usa-surveyors/ohio" rel="ajaxpanel">Ohio</a></li>
 
<li><a href="https://surveyearth.ning.com/hubs/usa-surveyors/oregon" rel="ajaxpanel">Oregon</a></li>
 
<li><a href="https://surveyearth.ning.com/hubs/usa-surveyors/pennsylvania" rel="ajaxpanel">Pennsylvania</a></li>
 
<li><a href="https://surveyearth.ning.com/hubs/usa-surveyors/rhode-island" rel="ajaxpanel">Rhode Island</a></li>
 
<li><a href="https://surveyearth.ning.com/hubs/usa-surveyors/south-carolina" rel="ajaxpanel">South Carolina</a></li>
 
<li><a href="https://surveyearth.ning.com/hubs/usa-surveyors/south-dakota" rel="ajaxpanel">South Dakota</a></li>
 
<li><a href="https://surveyearth.ning.com/hubs/usa-surveyors/texas" rel="ajaxpanel">Texas</a></li>
 
<li><a href="https://surveyearth.ning.com/hubs/usa-surveyors/utah" rel="ajaxpanel">Utah</a></li>
 
<li><a href="https://surveyearth.ning.com/hubs/usa-surveyors/vermont" rel="ajaxpanel">Vermont</a></li>
 
<li><a href="https://surveyearth.ning.com/hubs/usa-surveyors/virginia" rel="ajaxpanel">Virginia</a></li>
 
<li><a href="https://surveyearth.ning.com/hubs/usa-surveyors/washington" rel="ajaxpanel">Washington</a></li>
 
<li><a href="https://surveyearth.ning.com/hubs/usa-surveyors/wyoming" rel="ajaxpanel">Wyoming</a></li>
 
<li><a href="https://surveyearth.ning.com/hubs/usa-surveyors/wisconsin" rel="ajaxpanel">Wisconsin</a></li>
 
<li><a href="https://surveyearth.ning.com/hubs/usa-surveyors/west-virginia" rel="ajaxpanel">West Virginia</a></li>
 
<li><a href="https://surveyearth.ning.com/hubs/usa-surveyors/events" rel="ajaxpanel">USA Surveying Events</a></li>
</ul>
</div>
<div class="menu-item">
<h4 style="text-align: center;"><a href="#">Middle East</a></h4>
<ul>
    <li></li>
</ul>
</div>
</nav>

* {
  margin: 0px;
  padding: 0px;
}
 
body {
  background: #e5e5e7;
}
 
nav {
  font-family: Arial, sans-serif;
  line-height: 1.5;
  margin: 50px auto; /*for display only*/
  width: 300px;

}
 
.menu-item {
  background: #fff;
  width: 300px; 
}

/*Menu Header Styles*/
.menu-item h4 {
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  padding: 7px 12px;
  background: #000;
}

.menu-item h4 a {
  color: white;
  display: block;
  text-decoration: none;
  width: 300px;
}

/*Menu Header Styles*/
.menu-item h4 {
  border-bottom: 1px solid rgba(0,0,0,0.3);
  border-top: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  padding: 7px 12px;
}

.menu-item h4:hover {  
  background: #CACACF; 
}

/*ul Styles*/
.menu-item ul {
  background: #fff;
  font-size: 13px;
  line-height: 30px;
  list-style-type: none;
  overflow: hidden;
  padding: 0px;
}
 
.menu-item ul a {
  margin-left: 20px;
  text-decoration: none;
  color: #aaa;
  display: block;
  width: 300px;
}
 
/*li Styles*/
.menu-item li {
  border-bottom: 0px solid #eee;
}
 
.menu-item li:hover {
  background: #FFF;
}

/*ul Styles*/
.menu-item ul {
  background: #fff;
  font-size: 13px;
  line-height: 30px;
  height: 0px; /*Collapses the menu*/
  list-style-type: none;
  overflow: hidden;
  padding: 5px;
}

/*ul Styles*/
.menu-item ul {
  background: #fff;
  font-size: 13px;
  line-height: 30px;
  height: 0px;
  list-style-type: none;
  overflow:hidden;
  padding: 5px;
   
  /*Animation*/
  -webkit-transition: height 1s ease;
     -moz-transition: height 1s ease;
       -o-transition: height 1s ease;
      -ms-transition: height 1s ease;
          transition: height 1s ease;
}

.menu-item:hover ul {
  height: 100%;
}


.button {
    font-family: Arial, sans-serif;
    font-size: 12px;
    padding: 5px 10px;
    transition: all 0.2s ease-out;
  &:hover {
    border-color: #999;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  }
  &:active {
    box-shadow: 0 1px 3px rgba(0,0,0,0.25) inset;
  }
}

.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.5);
    transition: opacity 200ms;
  visibility: hidden;
    opacity: 0;
    &.light {
    background: rgba(255,255,255,0.5);
  }
  .cancel {
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: default;
  }
  &:target {
    visibility: visible;
    opacity: 1;
  }
}

.popup {
    margin: 75px auto;
    padding: 20px;
    background: #fff;
    border: 1px solid #666;
    width: 300px;
    box-shadow: 0 0 50px rgba(0,0,0,0.5);
    position: relative;
  .light & {
    border-color: #aaa;
    box-shadow: 0 2px 10px rgba(0,0,0,0.25);
  }
  h2 {
    margin-top: 0;
    color: #666;
    font-family: "Trebuchet MS", Tahoma, Arial, sans-serif;
  }
  .close {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 20px;
    right: 20px;
    opacity: 0.8;
    transition: all 200ms;
    font-size: 24px;
    font-weight: bold;
    text-decoration: none;
    color: #666;
    &:hover {
      opacity: 1;
    }
  }
  .content {
    max-height: 400px;
    overflow: auto;
  }
  p {
    margin: 0 0 1em;
    &:last-child {
      margin: 0;
    }
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.