Add menu css

theme/static/css/light.css

@@ -17,21 +17,28 @@ a {
 .main1 {
 	background: #FFF;
 	color: #000;
-	overflow: hidden;;
+	overflow: hidden;
 }
 .main1 a {
 	color: #000;
 }
-.main2 {
-	margin: -1em;
-}
 .main3 {
-	margin: 0 1em;
-	padding: 1em 0;
 	background: #FFF;
 	box-shadow: 0 0 1em #000;
 }
 
+/* header */
+header nav li a {
+	font-style: none;
+	text-decoration: none;
+}
+header nav > ul > li {
+	background: #FFF;
+}
+header nav > ul > li > div > a {
+	background: #000;
+}
+
 /* Page */
 .updated, .translations, .translation a {
 	color: #888;

theme/static/css/main.css

@@ -15,19 +15,58 @@ body > * {
 	padding: 0 10%;
 }
 
+.main1 {
+	overflow: hidden;
+}
 .main2 {
 	height: calc(100%);
+	margin: -1em;
 }
 .main3 {
-	margin-left: 1em;
-	margin-right: 1em;
+	padding: 1em 0;
+	margin: 0 1em;
 	height: calc(100%);
 }
 
+/* header */
+header nav ul {
+	padding: 0;
+	border: 0;
+	margin: 0;
+	list-style: none;
+	display: block;
+}
+header nav li {
+	display: inline-block;
+	margin: 0;
+	padding: 0;
+	border: 0;
+}
+header nav > ul {
+	padding-top: 0.25em;
+}
+header nav > ul > li {
+	float: left;
+	margin-left: 0.5em;
+}
+header nav > ul > li:first-child {
+	margin-left: 0;
+}
+header nav > ul > li > div {
+	margin-bottom: 0.25em;
+}
+header nav > ul > li > div > a {
+	display: inline-block;
+	position: relative;
+	padding-bottom: 0.25em;
+	transition: top 0.5s;
+	top: 0;
+}
+header nav > ul > li:hover > div > a, header nav > ul > li.active > div > a {
+	top: -0.25em;
+}
+
 /* page */
-.page_title {
-
-}
 .translations {
 	float: right;
 }

theme/templates/base.html

@@ -45,10 +45,14 @@
 					{% if DISPLAY_PAGES_ON_MENU %}
 						{% for p in pages %}
 							<li{% if p == page %} class="active"{% endif %}>
-								<a href="{{ SITEURL }}/{{ p.url }}">{{ p.title }}</a>
+								<div>
+									<a href="{{ SITEURL }}/{{ p.url }}">{{ p.title }}</a>
+								</div>
 							</li>{% endfor %}{% endif %}{% if DISPLAY_CATEGORIES_ON_MENU %}{% for cat, null in categories %}
 							<li{% if cat == category %} class="active"{% endif %}>
-								<a href="{{ SITEURL }}/{{ cat.url }}">{{ cat }}</a>
+								<div>
+									<a href="{{ SITEURL }}/{{ cat.url }}">{{ cat }}</a>
+								</div>
 							</li>
 						{% endfor %}
 					{% endif %}