I am currently working on enhancing my website's navigation by creating a mega menu. However, I am facing issues with the organization of the divs containing the ul content. In the fiddle linked below, you can see that "Africa", "Asia", and "Oceania" are not properly aligned.
The lists should be organized in a specific manner such as placing "Mainland Europe" below "UK & Ireland," followed by "Mainland Europe Cont." on its side, then "North America," and so forth. A good reference for this layout is the "Destinations" menu found on the Great Rail Journeys website:
Another issue arises when resizing the browser window where the mega menu overflows the slideshow controls on the right. This problem becomes apparent when decreasing the size of the jfiddle provided.
<!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">
...
</section>Here is the fiddle: