minor details

src/static/sass/layout/_navigation.scss

@@ -1,3 +1,4 @@
+
 .navigation {
    background-color: transparent; 
    z-index: 100;
@@ -33,6 +34,7 @@
          fill: red; 
          width: 2.2rem;
          padding-right: 2.5rem;
+
       }
       
       &--userLogo {
@@ -40,12 +42,13 @@
          border-radius: 5px;
          cursor: pointer;
          background-color: rgb(201, 199, 78);
-         height: 2.5rem;
-         width: 2.5rem;
+         height: 3rem;
+         width: 3rem;
          margin-right: .5rem;
         
-         &:hover .dropdownContent {
-            transition: all .4s; 
+         &:hover > .dropdownContent {
+            
+            transition: all .4s;
             opacity: 1; 
             visibility: visible;
          }
@@ -131,18 +134,73 @@
 
 
 .dropdownContent {
+   display: flex; 
+   flex-direction: column;
+//   align-items: center;
    opacity: 0;
+  
+   color: #FFF;
+   transition-delay: .5s;
+   padding-left: 1rem;
+   padding-top: 1.8rem;
    visibility: hidden;
-   height: 20rem;
+   height: 19rem;
+   border: 1px solid rgb(73, 73, 73);
    width: 15rem;
-   background-color: red;
+   background-color: rgba(#000, .9);
    transform: translateY(4.6rem) translateX(-11rem);
 
+   &--2 {
+        height: 10rem;
+   }
+
+   &-text {
+      width: 60%;
+      padding-top: 1.2rem;
+      font-size: 1.2rem;
+      
+      &:hover {
+         border-bottom: 1px solid #fff; 
+         // border-width: 2%;
+      }
+   }
+
+     &-textOutside {
+        font-size: 1.2rem;
+        padding-bottom: 1rem;
+     }
+
+   &--user {
+      height: 3rem;
+      width: 3rem;
+      border-radius: 5px;
+      background-color: rgb(64, 168, 228); 
+
+      &-2 {
+         background-color: rgb(230, 145, 48);
+      }
+
+      &-3 {
+         background-color: rgb(123, 230, 96);
+      }
+
+      &-text {
+         width: 3rem;
+         font-size: 1.2rem;
+         transform: translateX(4rem) translateY(-2rem);
+         
+         &:hover {
+            border-bottom: 1px solid #fff; 
+            border-width: 100%;
+         }
+      }
+   }
+
 }
 
 .dropdownContainer {
+   
    height: 100%;
-   display: flex;
    justify-content: center;
    align-content: center;
 
@@ -151,4 +209,4 @@
       opacity: 1;
       visibility: visible;
    }
-}
+}