Test

My test site

HTML

<body>
			<div class="gridContainer clearfix">
			<div id="LayoutDiv1">
			<div id="container">
				<header>
					<h1>Heading 1</h1>
					<h2>Heading 2</h2>
				</header>
				<nav>
					<ul>
						<li><a href="index.html">Home</a></li>	
						<li><a href="link1.html">Link 1</a>
							<ul>
								<li><a href="gallery1.html">Gallery</a></li>
							</ul>
						</li>
						<li><a href="link2.html">Link 2</a>
							<ul>
								<li><a href="gallery2.html">Gallery</a></li>
							</ul>
						</li>
						<li><a href="link3.html">Link 3</a>
							<ul>
								<li><a href="gallery3.html">Gallery</a></li>
							</ul>
						</li>
						<li><a href="link4.html">Link 4</a></li>
					</ul>
				</nav>
			
				<section>
					<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
					<p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>

				</section>
				<footer>
					<p>&copy; Test</p>
				</footer>
			</div>
			</div>
			</div> 
		</body>

CSS

img, object, embed, video {
	max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}

/* Mobile Layout: 480px and below. */

.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 87.36%;
	padding-left: 1.82%;
	padding-right: 1.82%;
}

#LayoutDiv1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}

/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 481px) {
.gridContainer {
	width: 90.675%;
	padding-left: 1.1625%;
	padding-right: 1.1625%;
}
#LayoutDiv1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
		border:1px solid #000000;
}
}

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {
.gridContainer {
	width: 88.2%;
	max-width: 1232px;
	padding-left: 0.9%;
	padding-right: 0.9%;
	margin: auto;
}
#LayoutDiv1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
}

#container{
	background:#228b22;
	float:left;
	border:1px solid #000000;
    width:100%;
}
        #container > nav > ul {
            display: flex;
            -webkit-display: flex;

            flex-direction: row;
            -webkit-flex-direction: row;

            justify-content: center;
            -webkit-justify-content: center;
        }
body {
	font-family:Arial, Helvetica Neue, Helvetica, sans-serif;
	font-size:90%;
	margin:20px auto;
	text-align:center;
	line-height:1.4em;
/* 	width:98%; */
	background:white;
}

header img{
	float:left;
}

header, section, article, footer,  nav{
	padding:10px 20px 20px;
	margin:10px;
	/* float:left; */
	width:auto;
	border:1px solid #000000;
}

header {
	display:block;
	position:relative;
	text-align:left;
}


header img {
	position:absolute;
	left:10px;
	top:10px;
    height:98%; 
}

header h1...

JavaScript

$(document).ready(function(){
					$('li').hover(function(){
						$(this).find('ul>li').stop().fadeToggle(400);
					});
				});