1:root { 2 --arm_light_blue: #00C1DE; 3 --arm_blue: #11809F; 4 --arm_blue1: #0091BD; 5 --arm_dark_blue: #002B49; 6 --arm_light_gray: #E5ECEB; 7 --arm_light_gray1: #EFF5F4; 8 --arm_light_gray2: #EBEBEB; 9 --arm_light_gray3: #F7F7F7; 10 --arm_dark_gray: #7D868C; 11 --arm_black: #333E48; 12 --arm_orange: #FF6B00; 13 --arm_yellow: #FFC700; 14} 15 16/* Dropdown Button */ 17.dropbtn { 18 margin: 0px; 19 padding: 0px 20px 0px 0em; 20 background-image: url("dropdown.png"); 21 background-repeat: no-repeat; 22 background-size: 0.5em; 23 background-position: right center; 24 cursor: pointer; 25} 26 27/* The container <div> - needed to position the dropdown content */ 28.dropdown { 29 position: relative; 30 display: inline-block; 31} 32 33/* Dropdown Content (Hidden by Default) */ 34.dropdown-content { 35 display: none; 36 position: absolute; 37 background-color: var(--arm_light_gray3); 38 min-width: 160px; 39 box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4); 40 white-space: nowrap; 41 cursor: pointer; 42 z-index: 1; 43} 44 45/* Links inside the dropdown */ 46.dropdown-content a { 47 # color: black; 48 color: var(--arm_dark_gray); 49 padding: 4px 6px; 50 text-decoration: none; 51 display: block; 52} 53 54/* Change color of dropdown links on hover */ 55.dropdown-content a:hover {background-color: #ddd} 56 57/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */ 58.show {display:block;} 59