_menu.scss 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. header{
  2. nav{
  3. &.dropmenu{
  4. a{
  5. padding: 10px;
  6. }
  7. & > ul{
  8. @include inlineflex();
  9. width: 100%;
  10. -webkit-box-pack: center;
  11. -ms-flex-pack: center;
  12. justify-content: center;
  13. -webkit-box-align: center;
  14. -ms-flex-align: center;
  15. align-items: center;
  16. & > li{
  17. text-align: center;
  18. position: relative;
  19. margin: 0 10px;
  20. &>a{
  21. border-top: 1px solid $light-blue;
  22. border-bottom: 3px solid $green;
  23. }
  24. & > ul{
  25. display: none;
  26. width: 100%;
  27. position: absolute;
  28. margin-top: 12px;
  29. z-index: 0;
  30. z-index: 999;
  31. li{
  32. background-color: white;
  33. a{
  34. display: block;
  35. padding: 10px;
  36. position: relative;
  37. &:before{
  38. content: "";
  39. position: absolute;
  40. width: 100%;
  41. height: 3px;
  42. bottom: 0;
  43. left: 0;
  44. background-color: $green;
  45. visibility: hidden;
  46. -webkit-transform: scaleX(0);
  47. transform: scaleX(0);
  48. -webkit-transition: all 0.3s ease-in-out 0s;
  49. transition: all 0.3s ease-in-out 0s;
  50. }
  51. }
  52. }
  53. }
  54. &:hover{
  55. & > ul{
  56. display: block;
  57. li:hover{
  58. a:hover:before {
  59. visibility: visible;
  60. -webkit-transform: scaleX(1);
  61. transform: scaleX(1);
  62. }
  63. }
  64. }
  65. }
  66. }
  67. }
  68. }
  69. }
  70. }