superfish.css 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  1. /*** ESSENTIAL STYLES ***/
  2. .sf-menu, .sf-menu * {
  3. margin: 0;
  4. padding: 0;
  5. list-style: none;
  6. }
  7. .sf-menu {
  8. line-height: 1.0;
  9. }
  10. .sf-menu ul {
  11. position: absolute;
  12. top: -999em;
  13. width: 10em; /* left offset of submenus need to match (see below) */
  14. }
  15. .sf-menu ul li {
  16. width: 100%;
  17. }
  18. .sf-menu li:hover {
  19. visibility: inherit; /* fixes IE7 'sticky bug' */
  20. }
  21. .sf-menu li {
  22. float: left;
  23. position: relative;
  24. }
  25. .sf-menu a {
  26. display: block;
  27. position: relative;
  28. }
  29. .sf-menu li:hover ul,
  30. .sf-menu li.sfHover ul {
  31. left: 0;
  32. top: 2.5em; /* match top ul list item height */
  33. z-index: 99;
  34. }
  35. ul.sf-menu li:hover li ul,
  36. ul.sf-menu li.sfHover li ul {
  37. top: -999em;
  38. }
  39. ul.sf-menu li li:hover ul,
  40. ul.sf-menu li li.sfHover ul {
  41. left: 10em; /* match ul width */
  42. top: 0;
  43. }
  44. ul.sf-menu li li:hover li ul,
  45. ul.sf-menu li li.sfHover li ul {
  46. top: -999em;
  47. }
  48. ul.sf-menu li li li:hover ul,
  49. ul.sf-menu li li li.sfHover ul {
  50. left: 10em; /* match ul width */
  51. top: 0;
  52. }
  53. /*** DEMO SKIN ***/
  54. .sf-menu {
  55. float: left;
  56. margin-bottom: 1em;
  57. }
  58. .sf-menu a {
  59. border-left: 1px solid #fff;
  60. border-top: 1px solid #CFDEFF;
  61. padding: .75em 1em;
  62. text-decoration:none;
  63. }
  64. .sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/
  65. color: #13a;
  66. }
  67. .sf-menu li {
  68. background: #BDD2FF;
  69. }
  70. .sf-menu li li {
  71. background: #AABDE6;
  72. }
  73. .sf-menu li li li {
  74. background: #9AAEDB;
  75. }
  76. .sf-menu li:hover, .sf-menu li.sfHover,
  77. .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
  78. background: #CFDEFF;
  79. outline: 0;
  80. }
  81. /*** arrows **/
  82. .sf-menu a.sf-with-ul {
  83. padding-right: 2.25em;
  84. min-width: 1px; /* trigger IE7 hasLayout so spans position accurately */
  85. }
  86. .sf-sub-indicator {
  87. position: absolute;
  88. display: block;
  89. right: .75em;
  90. top: 1.05em; /* IE6 only */
  91. width: 10px;
  92. height: 10px;
  93. text-indent: -999em;
  94. overflow: hidden;
  95. background: url('../images/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
  96. }
  97. a > .sf-sub-indicator { /* give all except IE6 the correct values */
  98. top: .8em;
  99. background-position: 0 -100px; /* use translucent arrow for modern browsers*/
  100. }
  101. /* apply hovers to modern browsers */
  102. a:focus > .sf-sub-indicator,
  103. a:hover > .sf-sub-indicator,
  104. a:active > .sf-sub-indicator,
  105. li:hover > a > .sf-sub-indicator,
  106. li.sfHover > a > .sf-sub-indicator {
  107. background-position: -10px -100px; /* arrow hovers for modern browsers*/
  108. }
  109. /* point right for anchors in subs */
  110. .sf-menu ul .sf-sub-indicator { background-position: -10px 0; }
  111. .sf-menu ul a > .sf-sub-indicator { background-position: 0 0; }
  112. /* apply hovers to modern browsers */
  113. .sf-menu ul a:focus > .sf-sub-indicator,
  114. .sf-menu ul a:hover > .sf-sub-indicator,
  115. .sf-menu ul a:active > .sf-sub-indicator,
  116. .sf-menu ul li:hover > a > .sf-sub-indicator,
  117. .sf-menu ul li.sfHover > a > .sf-sub-indicator {
  118. background-position: -10px 0; /* arrow hovers for modern browsers*/
  119. }
  120. /*** shadows for all but IE6 ***/
  121. .sf-shadow ul {
  122. background: url('../images/shadow.png') no-repeat bottom right;
  123. padding: 0 8px 9px 0;
  124. -moz-border-radius-bottomleft: 17px;
  125. -moz-border-radius-topright: 17px;
  126. -webkit-border-top-right-radius: 17px;
  127. -webkit-border-bottom-left-radius: 17px;
  128. }
  129. .sf-shadow ul.sf-shadow-off {
  130. background: transparent;
  131. }