Home page and news page are finished

resources/assets/sass/components/_menu.scss

@@ -1,4 +1,5 @@
 @use "../abstracts/variables" as *;
+@use "../abstracts/mixin" as *;
 
 .menu_container {
   height: 75px;
@@ -6,15 +7,19 @@
   background-image: linear-gradient(to right, #0102b0, #4090e3);
 
   .menu {
-    list-style-type: none;
-    padding: 0;
-    margin: 0;
+    @include reset-list;
     overflow: hidden;
     position: relative;
     z-index: 0;
+    margin: 0px -1px;
 
-    li {
+    > li {
       float: left;
+      margin: 0px -1px;
+
+      &.has_submenu {
+        position: relative;
+      }
 
       ul {
         display: none;
@@ -32,7 +37,7 @@
         background: white;
       }
 
-      &.selected a, &:hover a {
+      &.selected a, &:hover a, &.hover a {
         color: white;
         background: transparent;
         position: relative;
@@ -52,8 +57,8 @@
         &:after {
           content: '';
           display: block;
-          width: 10px;
-          height: 12px;
+          width: 12px;
+          height: 15px;
           background-image: URL('/images/menu-corner-2.svg');
           position: absolute;
           bottom: 0;
@@ -66,7 +71,7 @@
         width: 135px;
         display: block;
         background: white;
-        height: 25px;
+        height: 29px;
       }
 
       &:last-child {
@@ -88,4 +93,110 @@
 }
 .top_menu_container {
   height: 50px;
+
+  ul {
+    float: right;
+    @include reset-list;
+
+    li {
+      float: left;
+      padding: 6px 19px;
+      margin: 8px;
+      border-right: 1px solid #fff;
+
+      &:last-child {
+        border: none;
+      }
+
+      a {
+        float: left;
+        font-family: Nunito, serif;
+        font-size: 14px;
+        font-weight: bold;
+        text-align: right;
+        color: #fff;
+        text-decoration: none;
+        text-transform: uppercase;
+
+        i {
+          font-size: 18px;
+          position: relative;
+          top: 2px;
+          margin-left: 5px;
+        }
+      }
+
+      .search_form {
+        float: left;
+        overflow: hidden;
+        height: 21px;
+        margin-right: 10px;
+      }
+    }
+  }
+}
+
+.menu-submenu {
+  position: absolute;
+
+  > a {
+    display: block;
+    height: 30px;
+  }
+
+  ul {
+    @include reset-list;
+    a {
+      display: block;
+      font-family: Nunito, serif;
+      font-size: 14px;
+      font-weight: bold;
+      color: #1a1a1a;
+      text-decoration: none;
+      padding: 15px 0;
+      border-bottom: 1px solid #f8f8f8;
+    }
+  }
+
+  > ul {
+    padding: 20px;
+    border-radius: 3px;
+    box-shadow: 0 0 15px 0 rgba(35, 31, 32, 0.1);
+    background-color: #fff;
+    margin-left: 20px;
+    width: max-content;
+    display: none;
+
+    li {
+      ul {
+        display: none;
+        li {
+          padding-left: 10px;
+        }
+      }
+    }
+    li.has_submenu {
+      position: relative;
+      &:after {
+        -webkit-font-smoothing: antialiased;
+        display: var(--fa-display, inline-block);
+        font-style: normal;
+        font-variant: normal;
+        line-height: 1;
+        text-rendering: auto;
+        font-family: "Font Awesome 6 Free";
+        font-weight: 900;
+        content: "\f0d7";
+        position: absolute;
+        right: 0;
+        top: 15px;
+        -webkit-transform: rotate(270deg);
+        transform: rotate(270deg);
+      }
+      &.opened:after {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+      }
+    }
+  }
 }