dropdown.css 806 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. .dropdown {
  2. position: relative;
  3. display: flex;
  4. }
  5. ul {
  6. margin: 0;
  7. padding: 0;
  8. }
  9. .dropdown__menu {
  10. list-style-type: none;
  11. display: flex;
  12. flex-direction: column;
  13. align-items: stretch;
  14. position: absolute;
  15. top: 100%;
  16. margin-top: 0.5em;
  17. z-index: 3;
  18. white-space: nowrap;
  19. background-color: var(--dropdown-background);
  20. border: solid 1px #aaa;
  21. border-radius: 5px;
  22. }
  23. .dropdown__menu--hidden {
  24. display: none;
  25. }
  26. .dropdown__trigger {
  27. cursor: pointer;
  28. align-self: flex-start;
  29. padding: 0.5em;
  30. }
  31. .dropdown__trigger:hover, .dropdown__trigger--active {
  32. background-color: var(--dropdown-background-highlight);
  33. }
  34. .dropdown__item {
  35. padding: 0.7em;
  36. cursor: pointer;
  37. text-decoration: none;
  38. }
  39. .dropdown__item:hover {
  40. background-color: var(--dropdown-background-highlight);
  41. }