diff --git a/css/style.css b/css/style.css
index 45fa3bb..04f1c5a 100644
--- a/css/style.css
+++ b/css/style.css
@@ -7,7 +7,7 @@ body {
     margin: 0 auto;
 }
 header, footer{
-    height: 160px;
+    height: 200px;
     background: #ddd
 }
 header{
@@ -18,9 +18,24 @@ footer{
     }
 header img{
     padding-top: 62px;
+    float: left;
+}
+
+nav li{
+    display: inline;
+    line-height: 160px;
+    margin-left: 20px;
+}
+nav a:link, nav a:visited{
+    color: #fff;
+    text-decoration: underline;
+}
+nav a:hover{
+    color: #e01a4b;
+    text-decoration: none;
 }
 footer p{
-    line-height: 160px;
+    line-height: 200px;
 }
 h1, h2{
     font-weight: 100;
diff --git a/html/navigation.html b/html/navigation.html
new file mode 100644
index 0000000..5208608
--- /dev/null
+++ b/html/navigation.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="de">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="Die HTML Struktur in Webseiten">
+  <title>HTML Struktur</title>
+  <link rel="stylesheet" href="../css/reset.css">
+  <link rel="stylesheet" href="../css/code.css">
+  <link rel="stylesheet" href="../css/style.css">
+</head>
+
+<body>
+  <header>
+    <div class="wrapper">
+      <img src="../img/logo_w.svg" alt="Mein logo" title="Der Titel meines Bildes">
+      <nav role="navigation">
+        <ul>
+          <li><a href="../index.html">Home</a></li>
+          <li><a href="semantik.html">Semantik</a></li>
+          <li><a href="formulare.html">Formulare</a></li>
+        </ul>
+      </nav>
+    </div>
+  </header>
+
+  <main role="main" class="wrapper">
+    <h1>HTML5 Navigation einer Webseite</h1>
+    <article>
+      <h2>Die Navigation als ungeordnete Liste</h2>
+      <p>Die Navigation ist mit Vorteil als ungeordnete Liste zu konzipieren. Also ul > li a, somit ist eine vernünftige Struktur auch ohne CSS gewährleitet.
+      </p> 
+    </article>
+    <article>
+      <h2>Das Grundgerüst</h2>
+      <pre class="line-numbers language-html">
+<code class="language-html">&lt;nav role=&quot;navigation&quot;&gt;
+  &lt;ul&gt;
+    &lt;li&gt;&lt;a href=&quot;../index.html&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href=&quot;semantik.html&quot;&gt;Semantik&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href=&quot;formulare.html&quot;&gt;Formulare&lt;/a&gt;&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/nav&gt;
+</code>
+</pre>
+    </article>
+    <h2>Einfaches CSS der Navigation</h2>
+      <p>Das Beispiel hier in der Navigation dieses Beispiels.</p>
+      <p>Navigationen mit Unternavigations-Punkte finden Sie als weiteres Beispiel auf meinem <a href="https://git.perin.work/andy/CSS_NAV"> Git Server</a></p>
+    <article>
+<pre class="line-numbers language-css">
+<code class="language-css">nav li{
+  display: inline;
+  line-height: 160px;
+  margin-left: 20px;
+}
+nav a:link, nav a:visited{
+  color: #fff;
+  text-decoration: underline;
+}
+  nav a:hover{
+  color: #e01a4b;
+  text-decoration: none;
+}
+</code>
+</pre>
+  </article>
+
+  </main>
+
+  <footer>
+    <div class="wrapper">
+      <p><a title="Link zu Download" href="https://git.perin.work/andy/webdev">Download</a></p>
+    </div>
+  </footer>
+  <script src="../js/code.js"></script>
+</body>
+
+</html>
\ No newline at end of file
