WLS blue menu

WLS blue menu complete

by Precitools

HTML

<script src="https://www.press-brake-tools.com/js/jquery-1.11.3.min.js"></script>
<div id="topbox">
			<div id="headliner">
				<nav id="mainnav">
					<div class="nav-handle-container">
						<div class="nav-handle">
						</div>
					</div>
					<ul id="nav">
						<li>
							<a href="#">
								Menu1
							</a>
						</li>
						<li class="sub">
							<a href="#">
								Menu2
							</a>
							<ul>
								<li>
									<a href="#">
										Submenu1
									</a>
								</li>
								<li>
									<a href="#">
										Submenu2
									</a>
								</li>
							</ul>	
						</li>
						<li class="sub">
							<a href="#">
								Menu3
							</a>
							<ul>
								<li>
									<a href="#">
										Submenu 2.1
									</a>
								</li>
								<li>
									<a href="#">
										Submenu 2.2
									</a>
								</li>
								<li>
									<a href="#">
										Submenu 2.3
									</a>
								</li>
								<li>
									<a href="#">
										Submenu 2.4
									</a>
								</li>
								<li>
									<a href="#">
										Submenu 2.5
									</a>
								</li>
								<li>
									<a href="#">
										Submenu 2.6
									</a>
								</li>
								<li>
									<a href="#">
										Submenu 2.7
									</a>
								</li>
							</ul>
						</li>
						<li class="sub">
							<a href="#">
								Menu4
							</a>
							<ul>
								<li>
									<a href="#">
										Submenu 4.1
									</a>
								</li>
								<li>
									<a href="#">
										Submenu 4.2
									</a>
								</li>
								<li>
									<a href="#">
										Submenu 4.3
									</a>
								</li>
								<li>
									<a href="#">
										Submenu 4.4
									</a>
								</li>
								<li>
									<a href="#">
										Submenu 4.5
									</a>
								</li>
								<li>
									<a href="#">
										Submenu 4.6
									</a>
								</li>
								<li>
									<a href="#">
										Submenu...

CSS

html {
    height: 100%;
	}
body {
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: 'Arimo', sans-serif;
	font-size: 11pt;
	}
h1,
h1 a:visited,
h1 a:link,
h1 a:hover {
	font-family: 'Arimo', sans-serif;
	font-size: 25pt;
	font-weight: 700;
	color: #005DAB;
	text-decoration: none;
	padding: 0px;
    margin: 0px;
	}
h2,
h2 a:visited,
h2 a:link,
h2 a:hover  {
	font-family: 'Arimo', sans-serif;
	font-size: 20pt;
	font-weight: 700;
	color: #005DAB;
	text-decoration: none;
	padding: 0px;
    margin: 0px;
	}
h2 a:hover  {
	text-decoration: none;
	border-bottom: 1px solid #005DAB;
	}
h3,
h3 a:visited,
h3 a:link,
h3 a:hover  {
	font-family: 'Arimo', sans-serif;
	font-size: 16pt;
	font-weight: 400;
	color: #005DAB;
	text-decoration: none;
	padding: 0px;
    margin: 0px;
	}
h4,
h4 a:visited,
h4 a:link,
h4 a:hover  {
	font-family: 'Montserrat', sans-serif;
	font-size: 20pt;
	color: #005DAB;
	text-decoration: none;
	padding: 0px;
    margin: 0px;
	}
h4 a:hover  {
	text-decoration: none;
	border-bottom: 1px solid #005DAB;
	}
.h2blue {
	font-family: 'Arimo', sans-serif;
	font-size: 22pt; 
	font-weight: 500; 
	color: white; 
	background-color: #005DAB; 
	padding-left: 5px; 
	padding-right: 5px;
}
#topbox {
	width: 100%;
	display: inline-block;
	border-bottom: solid #364886 1px;
	box-shadow: 2px 0px 8px black;
	z-index: 10;
}
#topbox2 {
	width: 100%;
	display: inline-block;
	z-index: 10;
}
.lang,
.lang a:visited,
.lang a:link {
	font-size: 11pt;
	color: #cfcfcf;
	font-weight: 600;
	text-decoration: none;
	}
.lang a:hover {
	color: #005DAB;
	text-decoration: none;
	/* border-bottom: 1px dotted #005DAB; */
	}
.langact,
.langact a:visited,
.langact a:link,
.langact a:hover {
	font-size: 11pt;
	color: #005DAB;
	font-weight: 700;
	text-decoration: none;
	}
#headliner {
	display: inline-flex;
	}
.blue {
    color: #005DAB;
}
.bblue {
    color: #005DAB;
	font-weight: 700;
}
.list ul {
	list-style: none;
	}
.list li:before {
	content: '\f096';
	font-family: 'FontAwesome';
	float:...