improve alignment & hover behavior in header

themes/lumbung-theme/static/css/main.css

@@ -153,14 +153,12 @@ body {
 }
 
 #top-menu ul {
-    margin-left: 3rem;
+    margin: 0 3rem;
 }
 
 #top-menu a {
     text-decoration: none;
     color: #333;
-    padding: 5px;
-    margin: 0 2rem;
 }
 
 #top-menu a:hover,
@@ -170,6 +168,7 @@ body {
 
 #top-menu #login {
     font-weight: bold;
+    margin-top: 8px;    
 }
 
 #top-menu div {
@@ -218,10 +217,12 @@ body {
 
 .menu ul {
     list-style-type: none;
-    margin: 0;
+    margin: 0 auto;
     padding: 0;
     display: flex;
+    justify-content: space-between;
     text-transform: lowercase;
+    max-width: 1320px;
 }
 
 .menu-nav-item {
@@ -233,6 +234,9 @@ body {
 #top-menu ul.submenu {
     flex-direction: column;
     margin-left: 0;
+    position: absolute;
+    background-color: white;
+    z-index: 2;
 }
 
 .menu .submenu {