[edit] hover dropdown and responsive design

public/frontend/css/style.css

@@ -102,6 +102,35 @@ h2{
     font-size: 3.2rem;
 }
 
+.dropdown:hover .dropdown-menu{
+    display: block;
+    transition: all .5s, .5s linear;
+    top: 100%;
+    width: calc(100% + 3rem);
+    animation: fadeInUp 500ms;
+    padding: 0;
+}
+.dropdown-menu a{
+    font-size: 1rem;
+    font-weight: 500;
+    color: #000000;
+    padding: 0.5em 1em;
+}
+.dropdown-item:focus, .dropdown-item:hover{
+    background-color: #326CBF;
+    color: #FFFFFF;
+}
+@keyframes fadeInUp {
+    from {
+      opacity: 0;
+      transform: translate3d(0, 30px, 0);
+    }
+  
+    to {
+      opacity: 1;
+      transform: none;
+    }
+  }
 /* ===========================================
 Responsive Codes
 ======================================= */
@@ -308,6 +337,7 @@ Responsive Codes
     0% {transform: translateY(0);opacity:0.6;}
     100% {transform: translateY(40px);opacity:1;}
 }
+
 .carousel-control-next, .carousel-control-prev {
     width: 5% !important;
 }
@@ -1602,7 +1632,8 @@ Responsive Codes
     }
     .why-us-img,
     .blog-header p,
-    .lets-chat-section p{
+    .lets-chat-section p,
+    .sydney-img{
         padding: 0;
         margin-bottom: 1rem;
     }

resources/views/layout/app.blade.php

@@ -77,6 +77,17 @@
             <li class="nav-item">
                 <a class="nav-link" href="/about">ABOUT US</a>
             </li>
+            <li class="nav-item dropdown">
+              <a class="nav-link dropdown-toggle" href="{{url('/study-abroad')}}" id="navbarDropdown" role="button" data-bs-hover="dropdown" aria-expanded="false">
+                  EDUCATION
+              </a>
+              <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+                  <li>
+                      <a class="dropdown-item"  href="{{url('/study-abroad-detail')}}">Study in Australia</a>
+                      <a class="dropdown-item"  href="{{url('/study-abroad-detail')}}">Study in Melbourne</a>
+                  </li>
+              </ul>
+            </li>
             <li class="nav-item">
                 <a class="nav-link" href="/study-abroad"> STUDY ABROAD </a>
             </li>