Tweaked styling and whatnot for dropdown menus. Still overall nonfunctional, quite possibly will need a large overhaul before it's in working shape.

17th Website/src/components/dropdown/Dropdown.vue

@@ -57,6 +57,7 @@ button {
     border-radius: 5px;
     font-size: 15px;
     padding: 10px;
+    padding-left: 15px;
     color: var(--white);
     display: flex;
     flex-direction: row;

17th Website/src/components/dropdown/DropdownContent.vue

@@ -20,11 +20,13 @@ export default {
 
 <style scoped>
 div {
-    display: flex;
-    flex-direction: column;
+    display: block;
+    /* flex-direction: column; */
+    width: 10%;
     position: absolute;
     background-color: var(--background-secondary);
     border-radius: 0px 0px 10px 10px;
-    padding: 10px;
+    /* padding: 10px; */
+
 }
 </style>

17th Website/src/components/dropdown/DropdownItem.vue

@@ -1,6 +1,6 @@
 <script>
 export default {
-    name: 'dropdownItem'
+    name: 'dropdownItem',
 }
 </script>
 
@@ -13,12 +13,19 @@ export default {
 <style scoped>
 * {
     color: var(--white);
-    padding: 5px;
+    padding: 10px;
+}
+
+div {
+    padding: 15px;
+}
+
+div:last-child {
+    border-radius: 0 0 5px 5px;
 }
 
 div:hover {
     background-color: var(--accent-primary);
-    transition: color 0.5s;
 }
 
 </style>

17th Website/src/views/users.vue

@@ -54,11 +54,13 @@ export default {
                     <option>RRC</option>
                 </select>
                 
-                <dropdown title="hello">
+                <dropdown title="All Groups">
                     <DropdownContent>
-                        <DropdownItem>Item 1</DropdownItem>
-                        <DropdownItem>Item 2</DropdownItem>
-                        <DropdownItem>Item 3</DropdownItem>
+                        <DropdownItem>All Groups</DropdownItem>
+                        <DropdownItem>Echo</DropdownItem>
+                        <DropdownItem>HHC</DropdownItem>
+                        <DropdownItem>Recruit</DropdownItem>
+                        <DropdownItem>Discharged</DropdownItem>
                     </DropdownContent>
                 </dropdown>