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/* Dropdown button on hover & focus */ 28#.dropbtn:hover, .dropbtn:focus { 29# background-size: 0.7em; 30#} 31 32/* The container <div> - needed to position the dropdown content */ 33.dropdown { 34 position: relative; 35 display: inline-block; 36} 37 38/* Dropdown Content (Hidden by Default) */ 39.dropdown-content { 40 display: none; 41 position: absolute; 42 background-color: var(--arm_light_gray3); 43 min-width: 160px; 44 box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4); 45 white-space: nowrap; 46 cursor: pointer; 47 z-index: 1; 48} 49 50/* Links inside the dropdown */ 51.dropdown-content a { 52 # color: black; 53 color: var(--arm_dark_gray); 54 padding: 4px 6px; 55 text-decoration: none; 56 display: block; 57} 58 59/* Change color of dropdown links on hover */ 60.dropdown-content a:hover {background-color: #ddd} 61 62/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */ 63.show {display:block;} 64