Add dropdown

css/buttons.css

@@ -1,17 +1,25 @@
 button, .button {
+    --background: var(--button-background-color);
+    --color: var(--button-text-color);
+    --border: var(--button-border-color);
+
+    display: flex;
+    align-items: center;
+    gap: .75rem;
+
     padding: .75rem 1rem;
-    border: 1px solid var(--button-border-color);
-    background-color: var(--button-background-color);
+    border: 1px solid var(--border);
+    background-color: var(--background);
     border-radius: var(--border-radius);
 
     cursor: pointer;
-    color: var(--button-text-color);
+    color: var(--color);
     font-size: 1rem;
     font-weight: 500;
     text-transform: uppercase;
 }
 
 button.secondary, .button.secondary {
-    background-color: var(--background-color);
-    color: var(--button-border-color);
+    --background: var(--background-color);
+    --color: var(--button-border-color);
 }

css/dropdowns.css

@@ -0,0 +1,50 @@
+.dropdown {
+    position: relative;
+    cursor: pointer;
+}
+
+.dropdown .button {
+    text-transform: none;
+    text-decoration: none;
+    padding-right: 2.25rem;
+    background-image: var(--white-expand-image);
+    background-repeat: no-repeat;
+    background-position: right .5rem center;
+}
+
+.dropdown ul.menu {
+    display: none;
+    visibility: hidden;
+
+    width: max-content;
+    max-width: 14rem;
+    box-shadow: var(--dropdown-box-shadow);
+    background-color: var(--dropdown-menu-background);
+}
+
+.dropdown .menu a {
+    padding: .75rem 1rem;
+    width: 100%;
+    line-height: 1.5;
+    color: var(--text-color);
+    text-decoration: none;
+}
+
+.dropdown .menu a:hover {
+    background-color: var(--dropdown-menu-hover);
+}
+
+.dropdown:focus-within .button, .dropdown:hover .button,
+.dropdown:focus-within button, .dropdown:hover button {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
+.dropdown:focus-within .menu, .dropdown:hover .menu {
+    visibility: visible;
+    display: block;
+
+    position: absolute;
+    left: 0;
+    top: 100%;
+}

css/layout.css

@@ -59,10 +59,16 @@ body > header h1 {
     margin: 0;
 }
 
-body > header a, header a:visited {
+body > header a, body >header a:visited {
     color: var(--header-text-color)
 }
 
+body > header .button, body > header button {
+    --background: var(--header-background-color);
+    --color: var(--header-text-color);
+    --border: var(--header-text-color);
+}
+
 nav {
     background-color: var(--nav-background-color);
     grid-area: sidebar;

css/style.css

@@ -7,3 +7,4 @@
 @import "buttons.css";
 @import "tables.css";
 @import "modals.css";
+@import "dropdowns.css";

css/theme.css

@@ -1,10 +1,12 @@
 :root {
     --white: #FFFFFF;
+    --transparent-white: #FFFFFFDD;
     --lightest-gray: #FAFAFA;
     --light-gray: #EDEDED;
     --dark-gray: #4D4D4D;
     --darkest-gray: #454545;
     --black: #333333;
+    --transparent-black: #333333DD;
     --primary: #196EC2;
 
     --text-color: var(--black);
@@ -29,13 +31,17 @@
     --button-border-color: var(--primary);
     --button-text-color: var(--white);
 
-    --box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 2px 6px 2px rgba(60, 64, 67, .15);
+    --dropdown-menu-background: var(--white);
+    --dropdown-menu-hover: var(--lightest-gray);
+    --dropdown-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 2px 6px 2px rgba(60, 64, 67, .15);
+
     --header-height: 5rem;
     --body-padding: 2rem;
     --footer-height: 16rem;
     --nav-width: 16rem;
     --inverted-ic-logo: url("../images/ic-logo-white.svg");
     --expand-image: url("../images/expand-black.svg");
+    --white-expand-image: url("../images/expand-white.svg");
 }
 
 html {
@@ -59,6 +65,9 @@ html {
         --nav-background-color: var(--dark-gray);
         --button-border-color: var(--white);
 
+        --dropdown-menu-background: var(--transparent-black);
+        --dropdown-menu-hover: var(--black);
+
         --inverted-ic-logo: url("../images/ic-logo-black.svg");
         --expand-image: url("../images/expand-white.svg");
     }

index.html

@@ -14,30 +14,39 @@
 </head>
 <body>
 <header>
-    <ul class="heading">
-        <li>
+    <ul>
+        <li class="heading">
             <svg class="logo">
                 <use xlink:href="images/logo.svg#icon"></use>
             </svg>
         </li>
-        <li>
+        <li class="heading">
             <h1>CSS Starter</h1>
         </li>
-    </ul>
-    <ul class="menu-toggle" onclick="document.querySelector('body').classList.toggle('menu-open')">
-        <li>
+        <li class="menu-toggle" onclick="document.querySelector('body').classList.toggle('menu-open')">
             <svg class="open">
                 <use xlink:href="images/menu.svg#icon"></use>
             </svg>
             <svg class="close">
                 <use xlink:href="images/close.svg#icon"></use>
             </svg>
         </li>
+        <li class="dropdown">
+            <a href="#" class="button" aria-haspopup="true">
+                <svg>
+                    <use xlink:href="images/account.svg#icon"></use>
+                </svg>
+
+                My account
+            </a>
+
+            <ul class="menu" aria-label="submenu">
+                <li><a href="#">Another account</a></li>
+                <li><a href="#">Some other account</a></li>
+            </ul>
+        </li>
     </ul>
     <ul>
-        <li>
-            [email protected]
-        </li>
         <li>
             <a href="#" aria-label="log out">
                 <svg>
@@ -82,9 +91,9 @@ <h2>Profile</h2>
         <li>
             <a href="#">
                 <svg>
-                    <use xlink:href="images/account.svg#icon"></use>
+                    <use xlink:href="images/person.svg#icon"></use>
                 </svg>
-                Account
+                [email protected]
             </a>
         </li>
         <li>