dropdown.css 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. /* Dropdown Button */
  2. .dropbtn {
  3. background-color: transparent;
  4. color: white;
  5. /*padding: 16px;*/
  6. font-size: 16px;
  7. border: none;
  8. cursor: pointer;
  9. }
  10. /* Dropdown button on hover & focus */
  11. .dropbtn:hover, .dropbtn:focus {
  12. /*background-color: #2980B9;*/
  13. }
  14. /* The container <div> - needed to position the dropdown content */
  15. .dropdown {
  16. position: relative;
  17. display: inline-block;
  18. }
  19. /* Dropdown Content (Hidden by Default) */
  20. .dropdown-content {
  21. display: none;
  22. position: absolute;
  23. /*background-color: #f1f1f1;*/
  24. background-color: #F39C12;
  25. min-width: 160px;
  26. box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  27. z-index: 1;
  28. top: 45px;
  29. }
  30. /* Links inside the dropdown */
  31. .dropdown-content a {
  32. color: white;
  33. padding: 10px 5px;
  34. text-decoration: none;
  35. display: block;
  36. text-align: start;
  37. }
  38. /* Change color of dropdown links on hover */
  39. .dropdown-content a:hover {
  40. background-color: grey;
  41. }
  42. /* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
  43. .show {
  44. display: block;
  45. }