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