暂无描述
您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

_sub-menu.scss 1.2KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. /*------------------*
  2. # sub-menu
  3. *------------------*/
  4. .sub-menu {
  5. position: absolute;
  6. padding: 0;
  7. min-width: 240px;
  8. z-index: 4;
  9. box-shadow: 0 0 3.76px 0.24px rgba(0, 0, 0, 0.15);
  10. background: $color-white;
  11. opacity: 0;
  12. visibility: hidden;
  13. transform-origin: 0 0;
  14. transform-style: preserve-3d;
  15. @include transform(rotateX(-75deg));
  16. }
  17. .main-menu {
  18. li {
  19. &:hover > {
  20. .sub-menu {
  21. opacity: 1;
  22. visibility: visible;
  23. transition: transform 0.3s, opacity 0.3s;
  24. @include transform(rotateX(0deg));
  25. }
  26. }
  27. }
  28. }
  29. .sub-menu {
  30. li {
  31. padding: 0 20px;
  32. border-bottom: 1px solid $border-color2;
  33. margin: 0;
  34. a {
  35. font-weight: fontweight(regular);
  36. text-align: left;
  37. text-transform: capitalize;
  38. padding: 0;
  39. color: #565656;
  40. font-size: 14px;
  41. line-height: 40px;
  42. i {
  43. margin-left: 10px;
  44. }
  45. }
  46. &:hover > a {
  47. padding-left: 5px;
  48. }
  49. }
  50. }
  51. .sub-menu {
  52. .sub-menu {
  53. opacity: 0;
  54. visibility: hidden;
  55. left: 100%;
  56. top: 0;
  57. transform-origin: 0 0;
  58. transform-style: preserve-3d;
  59. @include transform(rotateX(-75deg));
  60. }
  61. }
  62. /*------------------*
  63. # sub-menu END
  64. *------------------*/