CSS   15

superfish css

Guest on 17th July 2022 05:29:31 AM

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

Raw Paste


Login or Register to edit or fork this paste. It's free.