2 * Sample CSS to add Superfish CSS to themes.
6 * 1. Change the #YOUR-BLOCK-ID (below) to the ID of your Superfish block.
8 * 2. Add the CSS to your theme, either as a separate CSS file or as a part of the main CSS file.
10 * 3. Note that by removing the .sf-style-none, the style will be applied to the menu regardless of
11 * the "Style" selected in the Superfish block configuration.
15 #YOUR-BLOCK-ID .sf-style-none {
20 #YOUR-BLOCK-ID .sf-style-none.sf-navbar {
23 #YOUR-BLOCK-ID .sf-style-none ul {
26 #YOUR-BLOCK-ID .sf-style-none a,
27 #YOUR-BLOCK-ID .sf-style-none span.nolink {
31 #YOUR-BLOCK-ID .sf-style-none a.sf-with-ul,
32 #YOUR-BLOCK-ID .sf-style-none span.nolink.sf-with-ul {
33 padding-right: 2.25em;
35 #YOUR-BLOCK-ID .sf-style-none.rtl a.sf-with-ul,
36 #YOUR-BLOCK-ID .sf-style-none.rtl span.nolink.sf-with-ul {
40 #YOUR-BLOCK-ID .sf-style-none span.sf-description {
48 #YOUR-BLOCK-ID .sf-style-none.rtl span.sf-description {
51 #YOUR-BLOCK-ID .sf-style-none li,
52 #YOUR-BLOCK-ID .sf-style-none.sf-navbar {
55 #YOUR-BLOCK-ID .sf-style-none li li {
58 #YOUR-BLOCK-ID .sf-style-none li li li {
61 #YOUR-BLOCK-ID .sf-style-none li:hover,
62 #YOUR-BLOCK-ID .sf-style-none li.sfHover,
63 #YOUR-BLOCK-ID .sf-style-none a:focus,
64 #YOUR-BLOCK-ID .sf-style-none a:hover,
65 #YOUR-BLOCK-ID .sf-style-none a:active,
66 #YOUR-BLOCK-ID .sf-style-none span.nolink:hover {
70 #YOUR-BLOCK-ID .sf-style-none li:hover > ul,
71 #YOUR-BLOCK-ID .sf-style-none li.sfHover > ul {
74 #YOUR-BLOCK-ID .sf-sub-indicator:after {
77 #YOUR-BLOCK-ID ul .sf-sub-indicator:after,
78 #YOUR-BLOCK-ID .sf-vertical .sf-sub-indicator:after {
81 #YOUR-BLOCK-ID .sf-navbar ul .sf-sub-indicator:after,
82 #YOUR-BLOCK-ID .sf-accordion .sf-sub-indicator:after,
83 #YOUR-BLOCK-ID .sf-accordion.sf-accordion-with-buttons .sf-accordion-button:after {
86 #YOUR-BLOCK-ID .sf-navbar ul ul .sf-sub-indicator:after {
89 #YOUR-BLOCK-ID .sf-accordion.sf-accordion-with-buttons li.sf-expanded > .sf-accordion-button:after {
92 #YOUR-BLOCK-ID .sf-horizontal.rtl ul .sf-sub-indicator:after,
93 #YOUR-BLOCK-ID .sf-vertical.rtl .sf-sub-indicator:after,
94 #YOUR-BLOCK-ID .sf-navbar.rtl ul ul .sf-sub-indicator:after {
97 #YOUR-BLOCK-ID div.sf-accordion-toggle.sf-style-none a {
102 #YOUR-BLOCK-ID div.sf-accordion-toggle.sf-style-none a.sf-expanded,
103 #YOUR-BLOCK-ID .sf-style-none.sf-accordion li.sf-expanded {
106 #YOUR-BLOCK-ID div.sf-accordion-toggle.sf-style-none a.sf-expanded,
107 #YOUR-BLOCK-ID .sf-style-none.sf-accordion li.sf-expanded > a,
108 #YOUR-BLOCK-ID .sf-style-none.sf-accordion li.sf-expanded > span.nolink {
111 #YOUR-BLOCK-ID .sf-style-none.sf-accordion li a.sf-accordion-button {
118 #YOUR-BLOCK-ID .sf-style-none.sf-accordion li li a,
119 #YOUR-BLOCK-ID .sf-style-none.sf-accordion li li span.nolink {
122 #YOUR-BLOCK-ID .sf-style-none.sf-accordion li li li a,
123 #YOUR-BLOCK-ID .sf-style-none.sf-accordion li li li span.nolink {
126 #YOUR-BLOCK-ID .sf-style-none.sf-accordion li li li li a,
127 #YOUR-BLOCK-ID .sf-style-none.sf-accordion li li li li span.nolink {
130 #YOUR-BLOCK-ID .sf-style-none.sf-accordion li li li li li a,
131 #YOUR-BLOCK-ID .sf-style-none.sf-accordion li li li li li span.nolink {
134 #YOUR-BLOCK-ID .sf-style-none.rtl.sf-accordion li li a,
135 #YOUR-BLOCK-ID .sf-style-none.rtl.sf-accordion li li span.nolink {
139 #YOUR-BLOCK-ID .sf-style-none.rtl.sf-accordion li li li a,
140 #YOUR-BLOCK-ID .sf-style-none.rtl.sf-accordion li li li span.nolink {
144 #YOUR-BLOCK-ID .sf-style-none.rtl.sf-accordion li li li li a,
145 #YOUR-BLOCK-ID .sf-style-none.rtl.sf-accordion li li li li span.nolink {
149 #YOUR-BLOCK-ID .sf-style-none.rtl.sf-accordion li li li li li a,
150 #YOUR-BLOCK-ID .sf-style-none.rtl.sf-accordion li li li li li span.nolink {
154 #YOUR-BLOCK-ID .sf-style-none li.sf-multicolumn-wrapper ol,
155 #YOUR-BLOCK-ID .sf-style-none li.sf-multicolumn-wrapper ol li {
159 #YOUR-BLOCK-ID .sf-style-none li.sf-multicolumn-wrapper a.menuparent,
160 #YOUR-BLOCK-ID .sf-style-none li.sf-multicolumn-wrapper span.nolink.menuparent {
163 #YOUR-BLOCK-ID .sf-style-none li.sf-multicolumn-wrapper {
166 #YOUR-BLOCK-ID .sf-style-none li.sf-multicolumn-wrapper li {
167 background: transparent;