reparation dropdown

assets/css/site-header.css

@@ -88,7 +88,12 @@
 /*       nav      */
 /*----------------*/
 
-#site-nav a {
+
+/*----------------*/
+/*       nav      */
+/*----------------*/
+
+/* #site-nav a {
     text-decoration: none;
     color: var(--color-txt);
 }
@@ -115,12 +120,8 @@
 
 #site-nav .nav-level-1_li{
     font-weight: 500;
-    /* padding-right: 30px; */
 }
 
-/* .nav-level-1_li.li-dropdown:hover{
-    border-bottom: solid 1px black;
-} */
 
 #site-nav li:hover {
     cursor: pointer;
@@ -158,4 +159,4 @@ ul li:hover > ul,
     font-size: 1.2em;
     line-height: 0;
 
-}
+} */

assets/css/site-nav.css

@@ -0,0 +1,92 @@
+
+#site-nav a {
+    text-decoration: none;
+    color: currentColor;
+}
+
+#site-nav li{
+    font-weight: 500;
+    color: var(--color-txt);
+}
+
+.arrow{
+
+    --size: 12px;
+    height: var(--size);
+    width: var(--size);
+    position: relative; 
+    top: 2px;
+    display: inline-block;
+ 
+    svg{
+        height: var(--size);
+        width: var(--size);
+        transform: rotate(0deg);
+        transform-origin: center;
+        transition: transform .2s ease-in-out;
+        fill: var(--color-txt);
+    }
+    
+    
+}
+
+#site-nav .nav-level-1_ul{
+    display: flex;
+    gap: calc(var(--padding-inner)*2);
+
+}
+#site-nav .nav-level-1_li {
+    display: block;
+    /* float: left; */
+    padding: var(--padding-inner);
+    position: relative;
+    text-decoration: none;
+
+    &:hover{
+        color: var(--color);
+        .arrow svg{
+            transform: rotate(90deg);
+            fill: var(--color);
+        }
+
+    }
+}
+
+
+
+#site-nav li:hover {
+    cursor: pointer;
+}
+
+.nav-level-2_ul {
+    visibility: hidden;
+    opacity: 0;
+    position: absolute;
+    left: 0;
+    display: none;
+    border-top: 1px solid var(--color);
+    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
+    margin-top: var(--padding-inner); 
+    min-width: 24ch;
+
+}
+
+.nav-level-1_ul li:hover > .nav-level-2_ul,
+.nav-level-2_ul:hover {
+    visibility: visible;
+    opacity: 1;
+    display: block;
+}
+.nav-level-2_li{
+    width: 100%;
+    padding: calc(var(--padding-inner)*0.75) var(--padding-inner);
+    
+}
+.nav-level-2_li:hover{
+    background-color: var(--color-light);
+}
+
+
+
+
+