I´m working on my website navigation building a mega menu, but my divs containing the ul content is not organized. If you check on my fiddle below, you can see that the "Africa", "Asia", "Oceania" are far away.
The lists should be organized by having "Mainland europe" below "Uk & Ireland" then by it's side should be "mainland europe cont" and then below "North America" and so on...just like the "Destinations" menu on this website: https://www.greatrail.com/
The other problem relates to the content clipping when i decrease the size of my browser. If you decrease the jfiddle you will notice that the mega menu overflows the slideshow controls (that is a slideshow in the middle but I coulnd't upload the images) on the right.
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>Great Train Journeys</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial- scale=1.0">
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.1.0.min.js" type="text/javascript"></script>
<script src="js/imgCarrousel.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<ul class="nav">
<li><a href="#">home</a></li>
<li>
<a href="#">destinations</a>
<div>
<div class="nav-column">
<h3>uk & ireland</h3>
<ul>
<li> <a href="#">England</a> </li>
<li> <a href="#">Ireland</a> </li>
<li> <a href="#">Scotland</a> </li>
<li> <a href="#">Wales</a> </li>
</ul>
</div>
<div class="nav-column" id="europe1">
<h3>mainland europe</h3>
<ul>
<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>
<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>
</div>
<div class="nav-column">
<h3>mainland europe cont...</h3>
<ul>
<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>
<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>
</ul>
</div>
<div class="nav-column">
<h3>north america</h3>
<ul>
<li> <a href="#">Alaska</a> </li>
<li> <a href="#">Canada</a> </li>
<li> <a href="#">Mexico</a> </li>
<li> <a href="#">United States</a> </li>
</ul>
</div>
<div class="nav-column">
<h3>central america</h3>
<ul>
<li> <a href="#">Guatemala</a> </li>
<li> <a href="#">Costa Rica</a> </li>
<li> <a href="#">Cuba</a> </li>
<li> <a href="#">Panama</a> </li>
<li> <a href="#">St Kitts and Nevis</a> <li>
</ul>
</div>
<div class="nav-column">
<h3>south america</h3>
<ul>
<li> <a href="#">Argentina</a> </li>
<li> <a href="#">Brazil</a> </li>
<li> <a href="#">Bolívia</a></li>
<li> <a href="#">Chile</a> </li>
<li> <a href="#">Colombia</a></li>
<li> <a href="#">Ecuador</a></li>
<li> <a href="#">Paraguay</a></li>
<li> <a href="#">Peru</a></li>
<li> <a href="#">Uruguay</a></li>
<li> <a href="#">Venezuela</a></li>
</ul>
</div>
<div class="nav-column" id="africa">
<h3>africa</h3>
<ul>
<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>
<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 class="nav-column">
<h3>asia</h3>
<ul>
<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 class="nav-column">
<h3>oceania</h3>
<ul>
<li> <a href="#">Australia</a></li>
<li> <a href="#">New Zealand</a> </li>
</ul>
</div>
</div>
</li>
<li><a href="#">about</a></li>
<li><a href="#">contact</a></li>
</ul>
</div>
<section id="galeria">
<img class="slider fade" src="images/Flam Railway_small.jpg" alt=""/>
<img class="slider fade" src="images/rocky-mountaineer.jpg" alt="" title="Rocky Mountaineer"/>
<img class="slider fade" src="images/Hogwarts train.png" alt=""/>
<img class="slider fade" src="images/amtrak-starlight_small.jpg" alt=""/>
<img class="slider fade" src="images/hiram_bingham_720.jpg" alt=""/>
<img class="slider fade" src="images/rovos rail.jpg" alt=""/>
<img class="slider fade" src="images/Venice Simplon.jpg" alt=""/>
<img class="slider fade" src="images/the ghan.jpg" alt=""/>
<span id="prev">«</span>
<span id="next">»</span>
</section>
</body>
body,html {
background-color: #F7F7F7;
display: block;
margin: 0;
padding: 0;
width: 100%;
}
/* Estilos do slideshow de imagens */
#galeria {
display: block;
position: relative;
z-index: 0;
width: 100%;
}
#galeria img {
display: none;
position: absolute;
width: 100%;
height: auto;
}
/* Controlos do slideshow */
#next, #prev{
color: #fff;
position: absolute;
background: rgba(8,41,46, .8);
display: block;
top: 25%;
font-size: 1.5em;
opacity: .7;
margin-top: 20%;
}
@media (max-width: 750px) {
#next,#prev {
margin-top: 15%;
}
}
#next:hover, #prev:hover{
cursor: pointer;
opacity: 1;
}
#next{
right: 0;
padding: 10px 5px 15px 10px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
#prev{
left: 0;
padding: 10px 10px 15px 5px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1s;
-moz-animation-name: fade;
-moz-animation-duration: 1s;
-ms-animation-name: fade;
-ms-animation-duration: 1s;
animation-name: fade;
animation-duration: 1s;
}
@-webkit-keyframes fade {
from {opacity: 0.4}
to {opacity: 1}
}
@-moz-keyframes fade {
from {opacity: 0.4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: 0.4}
to {opacity: 1}
}
keyframes fade {
from {opacity: 0.4}
to {opacity: 1}
}
/* Estilos da navegação principal`*/
#container {
align-items: center;
justify-content: center;
display: flex;
padding: 0;
position: relative;
width: 100%;
}
.nav {
border: none;
cursor: default;
display: inline-block;
height: 150px;
margin: 0 auto;
padding: 0;
position: relative;
top: 50px;
z-index: 500;
}
.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 {
border-right: 1px solid #08292E;
display: block;
color: #08292E;
font-family: Orator Std, IrisUPC, sans-serif;
font-size: 1.2em;
line-height: 30px;
padding: 0 20px;
position: relative;
opacity: .7;
-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: #08292E;
color: white;
}
.nav > li > div {
display: table-cell;
color: white;
font-family: Orator Std, IrisUPC, sans-serif;
position: absolute;
top: 30px;
left: -100%;
width: 1344px;
opacity: 0;
visibility: hidden;
overflow: hidden;
background: #08292E;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
-webkit-transition: all .3s ease .15s;
-moz-transition: all .3s ease .15s;
-o-transition: all .3s ease .15s;
-ms-transition: all .3s ease .15s;
transition: all .3s ease .15s;
}
.nav li:hover > div {
opacity: .7;
visibility: visible;
overflow: hidden;
}
.nav .nav-column {
float: left;
margin: 0;
padding: 2.5%;
position: relative;
width: 10%;
}
.nav .nav-column h3 {
margin: 20px 0 10px 0;
}
.nav .nav-column li {
padding-left: 0;
}
.nav .nav-column li a {
display: block;
}
.nav .nav-column li a:hover {
color: aquamarine;
}
Here is the fiddle:
Arranged nav-column div for specific design you describe in you question
Just fixed design issue for Asian, Africa and Oceania div which were not formatted.
.nav {
cursor: default;
display: inline-block;
/*
margin: 0 auto;
padding: 0;*/
position: relative;
top: 30px;
z-index: 500;
width: 70%;
}
Demo : http://codepen.io/UserIsMonica/pen/ENbPLL
Note : havn't design responsive design work for small screen as example you mentioned.