css/screen/superfish.css

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