menu.css 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
  1. /****************************************************************
  2. * *
  3. * 代码库 *
  4. * www.dmaku.com *
  5. * 努力创建完善、持续更新插件以及模板 *
  6. * *
  7. ****************************************************************/
  8. /*** ESSENTIAL STYLES ***/
  9. .sf-menu, .sf-menu * {
  10. margin: 0;
  11. padding: 0;
  12. list-style: none;
  13. }
  14. .sf-menu {
  15. line-height: 1.0;
  16. }
  17. .sf-menu ul {
  18. position: absolute;
  19. top: -999em;
  20. width: 13em; /* left offset of submenus need to match (see below) */
  21. }
  22. .sf-menu ul li {
  23. width: 100%;
  24. }
  25. .sf-menu li:hover {
  26. visibility: inherit; /* fixes IE7 'sticky bug' */
  27. }
  28. .sf-menu li {
  29. float: left;
  30. position: relative;
  31. }
  32. .sf-menu a {
  33. display: block;
  34. }
  35. .sf-menu li:hover ul, .sf-menu li.sfHover ul {
  36. left: 0;
  37. top: 2.4em;
  38. *top:2.2em; /* ie6,7 bug */
  39. z-index: 99;
  40. }
  41. ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul {
  42. top: -999em;
  43. }
  44. ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul {
  45. left: 15em; /* match ul width */
  46. top: 0;
  47. }
  48. ul.sf-menu li li:hover li ul, ul.sf-menu li li.sfHover li ul {
  49. top: -999em;
  50. }
  51. ul.sf-menu li li li:hover ul, ul.sf-menu li li li.sfHover ul {
  52. left: 15em; /* match ul width */
  53. top: 0;
  54. }
  55. /*** DEMO SKIN ***/
  56. .sf-menu a {
  57. border-left: 1px solid #fff;
  58. border-top: 1px solid #CFDEFF;
  59. padding: .75em 1em;
  60. text-decoration: none;
  61. }
  62. .sf-menu a, .sf-menu a:visited {
  63. color: #13a;
  64. }
  65. .sf-menu li {
  66. background: #BDD2FF;
  67. }
  68. .sf-menu li li {
  69. background: #AABDE6;
  70. }
  71. .sf-menu li li li {
  72. background: #9AAEDB;
  73. }
  74. .sf-menu li:hover, .sf-menu li.sfHover, .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
  75. background: #CFDEFF;
  76. outline: 0;
  77. }
  78. /*** arrows **/
  79. .sf-menu a.sf-with-ul {
  80. padding-right: 1.8em;/*min-width:1px;*/
  81. }
  82. .sf-sub-indicator {
  83. position: absolute;
  84. display: block;
  85. right: .75em;
  86. top: 1.05em; /* IE6 only */
  87. width: 10px;
  88. height: 10px;
  89. text-indent: -999em;
  90. overflow: hidden;
  91. background: url('../images/superfish-arrows.gif') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
  92. }
  93. a > .sf-sub-indicator {
  94. top: .8em;
  95. background-position: 0 -100px; /* use translucent arrow for modern browsers*/
  96. }
  97. /* apply hovers to modern browsers */
  98. a:focus > .sf-sub-indicator, a:hover > .sf-sub-indicator, a:active > .sf-sub-indicator, li:hover > a > .sf-sub-indicator, li.sfHover > a > .sf-sub-indicator {
  99. background-position: -10px -100px; /* arrow hovers for modern browsers*/
  100. }
  101. /* point right for anchors in subs */
  102. .sf-menu ul .sf-sub-indicator {
  103. background-position: -10px 0;
  104. }
  105. .sf-menu ul a > .sf-sub-indicator {
  106. background-position: 0 0;
  107. }
  108. /* apply hovers to modern browsers */
  109. .sf-menu ul a:focus > .sf-sub-indicator, .sf-menu ul a:hover > .sf-sub-indicator, .sf-menu ul a:active > .sf-sub-indicator, .sf-menu ul li:hover > a > .sf-sub-indicator, .sf-menu ul li.sfHover > a > .sf-sub-indicator {
  110. background-position: -10px 0; /* arrow hovers for modern browsers*/
  111. }
  112. /*** shadows for all but IE6 ***/
  113. .sf-shadow ul {
  114. background: url('../images/superfish-shadow.png') no-repeat bottom right;
  115. padding: 0 8px 9px 0;
  116. }
  117. .sf-shadow ul.sf-shadow-off {
  118. background: transparent;
  119. }
  120. /*** 垂直 adding sf-vertical in addition to sf-menu creates a vertical menu ***/
  121. .sf-vertical, .sf-vertical li {
  122. width: 10em;
  123. }
  124. /* this lacks ul at the start of the selector, so the styles from the main CSS file override it where needed */
  125. .sf-vertical li:hover ul, .sf-vertical li.sfHover ul {
  126. left: 10em; /* match ul width */
  127. top: 0;
  128. }
  129. /*** alter arrow directions ***/
  130. .sf-vertical .sf-sub-indicator {
  131. background-position: -10px 0;
  132. } /* IE6 gets solid image only */
  133. .sf-vertical a > .sf-sub-indicator {
  134. background-position: 0 0;
  135. } /* use translucent arrow for modern browsers*/
  136. /* hover arrow direction for modern browsers*/
  137. .sf-vertical a:focus > .sf-sub-indicator, .sf-vertical a:hover > .sf-sub-indicator, .sf-vertical a:active > .sf-sub-indicator, .sf-vertical li:hover > a > .sf-sub-indicator, .sf-vertical li.sfHover > a > .sf-sub-indicator {
  138. background-position: -10px 0; /* arrow hovers for modern browsers*/
  139. }