/* * Sample CSS for adding Superfish styles to themes. * * Instructions: * * 1. Change the #block-superfish-1 (below) to the ID of your Superfish menu. * * 2. Add the CSS to your theme, either as a separate CSS file or as a part of the main CSS file. * * 3. Note that by removing the .sf-style-none, the style will be applied to the menu regardless of * the Style selected in the block configuration. * */ #block-superfish-1 .sf-style-none { float: left; margin: 0; padding: 0; } #block-superfish-1 .sf-style-none.sf-navbar { width: 100%; } #block-superfish-1 .sf-style-none ul { padding-left: 0; } #block-superfish-1 .sf-style-none a { color: #0000ff; padding: 0.75em 1em; } #block-superfish-1 .sf-style-none a.sf-with-ul { padding-right: 2.25em; } #block-superfish-1 .sf-style-none.rtl a.sf-with-ul { padding-left: 2.25em; padding-right: 1em; } #block-superfish-1 .sf-style-none span.sf-description { color: #0000ff; display: block; font-size: 0.8em; line-height: 1.5em; margin: 5px 0 0 5px; padding: 0; } #block-superfish-1 .sf-style-none li, #block-superfish-1 .sf-style-none.sf-navbar { background: #f0f0f0; } #block-superfish-1 .sf-style-none li li { background: #e0e0e0; } #block-superfish-1 .sf-style-none li li li { background: #d0d0d0; } #block-superfish-1 .sf-style-none li:hover, #block-superfish-1 .sf-style-none li.sfHover, #block-superfish-1 .sf-style-none a:focus, #block-superfish-1 .sf-style-none a:hover, #block-superfish-1 .sf-style-none a:active { background: #c0c0c0; outline: 0; } #block-superfish-1 .sf-style-none li:hover > ul, #block-superfish-1 .sf-style-none li.sfHover > ul { top: 40px; } #block-superfish-1 .sf-style-none .sf-sub-indicator { background-image: url('../images/dropdown-arrows.png'); } #block-superfish-1 div.sf-accordion-toggle.sf-style-none a { background: #f0f0f0; color: #0000ff; padding: 1em; } #block-superfish-1 div.sf-accordion-toggle.sf-style-none a.sf-expanded, #block-superfish-1 .sf-menu.sf-style-none.sf-accordion li.sf-expanded { background-color: #c0c0c0; } #block-superfish-1 div.sf-accordion-toggle.sf-style-none a.sf-expanded, #block-superfish-1 .sf-menu.sf-style-none.sf-accordion li.sf-expanded > a { font-weight: bold; } #block-superfish-1 .sf-menu.sf-style-none.sf-accordion li a.sf-accordion-button { font-weight: bold; position: absolute; right: 0; top: 0; z-index: 499; } #block-superfish-1 .sf-menu.sf-style-none.sf-accordion li li a { padding-left: 2em; } #block-superfish-1 .sf-menu.sf-style-none.sf-accordion li li li a { padding-left: 3em; } #block-superfish-1 .sf-menu.sf-style-none.sf-accordion li li li li a { padding-left: 4em; } #block-superfish-1 .sf-menu.sf-style-none.sf-accordion li li li li li a { padding-left: 5em; } #block-superfish-1 .sf-style-none ul.sf-megamenu li.sf-megamenu-wrapper ol, #block-superfish-1 .sf-style-none ul.sf-megamenu li.sf-megamenu-wrapper ol li { margin: 0; padding: 0; } #block-superfish-1 .sf-style-none ul.sf-megamenu li.sf-megamenu-wrapper a.menuparent { font-weight: bold; } #block-superfish-1 .sf-style-none ul.sf-megamenu li.sf-megamenu-wrapper ol li.sf-megamenu-column { display: inline; float: left; width: 12em; } #block-superfish-1 .sf-style-none.rtl ul.sf-megamenu li.sf-megamenu-wrapper ol li.sf-megamenu-column { float: right; } #block-superfish-1 .sf-style-none li.sf-parent-children-1 ul.sf-megamenu { width: 12em; } #block-superfish-1 .sf-style-none li.sf-parent-children-2 ul.sf-megamenu { width: 24em; } #block-superfish-1 .sf-style-none li.sf-parent-children-3 ul.sf-megamenu { width: 36em; } #block-superfish-1 .sf-style-none li.sf-parent-children-4 ul.sf-megamenu { width: 48em; } #block-superfish-1 .sf-style-none li.sf-parent-children-5 ul.sf-megamenu { width: 60em; } #block-superfish-1 .sf-style-none li.sf-parent-children-6 ul.sf-megamenu { width: 72em; } #block-superfish-1 .sf-style-none li.sf-parent-children-7 ul.sf-megamenu { width: 84em; } #block-superfish-1 .sf-style-none li.sf-parent-children-8 ul.sf-megamenu { width: 96em; } #block-superfish-1 .sf-style-none li.sf-parent-children-9 ul.sf-megamenu { width: 108em; } #block-superfish-1 .sf-style-none li.sf-parent-children-10 ul.sf-megamenu { width: 120em; }