SuperFish Menu sub-menu arrow styles

Question

How do I change the style of the arrows on the Superfish menu? I can't find any styles anywhere but my layout stylesheet and it has nothing defining the arrows.

The second level menu has the sf-arrows class and it shows a down arrow vs. a right arrow like the third level. How can I change the arrow style for the second level to a right arrow?

Screenshot

HTML:

<ul class="sf-menu fixed" id="menu">
    <li class="current">
        <a href="index.html">Home</a>
    </li>
    <li>
        <a href="#">About us</a>
    </li>
    <li class="dropdown">
        <a href="#">Courses</a>
        <ul class="sf-arrows">
            <li class="dropdown">
                <a href="/courses">Classroom Courses</a>
                <ul>
                    <li class="dropdown wide">
                        <a href="/courses/CIC/">Certified Insurance Counselors (CIC)</a>
                        <ul>
                            <li><a href="/courses/CIC/cic_personal_lines">CIC Personal Lines</a></li>
                            <li><a href="/courses/CIC/commercial_casualty11">CIC Commercial Casualty</a></li>
                            <li><a href="/courses/CIC/commercial_property">CIC Commercial Property</a></li>
                            <li><a href="/courses/CIC/life_and_health">CIC Life &amp; Health</a></li>
                            <li><a href="/courses/CIC/agency_management">CIC Agency Management</a></li>
                        </ul>
                    </li>
                    <!-- MANY MORE ITEMS HERE -->
                </ul>
            </li>
            <li class="dropdown">
                <a href="#">Online Courses</a>
                <ul>
                    <li class="wide"><a href="/online_courses/self_study/self_study">Self-Paced Online Courses</a></li>
                    <li class="wide"><a href="/online_courses/online_classroom">Instructor-Led Online Courses</a></li>
                </ul>
            </li>
            <li>
                <a href="#">In-House Courses</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="#">Schedule or Register</a>
    </li>

score 0 · Answer 1 · answered Dec 11 '14 at 11:13

           <body>
            The content of the body element is displayed in your browser.

           <ul>
                        <li><a href="/courses/CIC/cic_personal_lines">CIC Personal Lines</a><ul>
                        <li><a href="/courses/CIC/cic_personal_lines">CIC Personal Lines</a><ul>
                        <li><a href="/courses/CIC/cic_personal_lines">CIC Personal Lines</a></li>
                        <li><a href="/courses/CIC/commercial_casualty11">CIC Commercial 
          Casualty</a></li>
                        <li><a href="/courses/CIC/commercial_property">CIC Commercial 
          Property</a></li>
                        <li><a href="/courses/CIC/life_and_health">CIC Life &amp; Health</a></li>
                        <li><a href="/courses/CIC/agency_management">CIC Agency Management</a> 
          </li>
                    </ul></li>
                        <li><a href="/courses/CIC/commercial_casualty11">CIC Commercial 
          Casualty</a></li>
                        <li><a href="/courses/CIC/commercial_property">CIC Commercial 
          Property</a></li>
                        <li><a href="/courses/CIC/life_and_health">CIC Life &amp; Health</a></li>
                        <li><a href="/courses/CIC/agency_management">CIC Agency Management</a>
         </li>
                    </ul></li>
                        <li><a href="/courses/CIC/commercial_casualty11">CIC Commercial 
        Casualty</a></li>
                        <li><a href="/courses/CIC/commercial_property">CIC Commercial               
       Property</a></li>
                        <li><a href="/courses/CIC/life_and_health">CIC Life &amp; Health</a></li>
                        <li><a href="/courses/CIC/agency_management">CIC Agency Management</a>                               
           </li>
                    </ul>
      </body>

    </html>

as his issues with understanding so, i throught to show the exact soultion with the same code what he written over the question. if he need to have a list and list menu item then he have to include in the li tag over li tag — technojohn, Dec 13 '14 at 09:47

Rafael Merlin · Accepted Answer · 2014-12-11T16:41:12.957

I've tested this on Superfish v 1.7.5.

This arrow is actually a border using opacity.

You just need to start it from the left instead of the top.

Replace in your superfish.css all the border-top for border-left. Examples:

border-top: 1px solid rgba(255,255,255,.5);

must be replaced with:

border-left: 1px solid rgba(255,255,255,.5);

Also

border-top-color: rgba(255,255,255,.5);

must be replace with:

border-left-color: rgba(255,255,255,.5);

I believe this shall change the arrow orientation. I've tested here and apparently it has worked.

Edit:

The selectors I've changed here for it to work:

.sf-menu a { 
    border-top: 1px solid #dFeEFF; /* fallback colour must use full shorthand */
    border-top: 1px solid rgba(255,255,255,.5);
}
.sf-arrows .sf-with-ul:after {
    border-top-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */
    border-top-color: rgba(255,255,255,.5); 
}
.sf-arrows > .sfHover > .sf-with-ul:after {
    border-top-color: white; /* IE8 fallback colour */
}

It would help if you say WHAT selectors because there are several. — MB34, Dec 11 '14 at 15:58
Just added them here. I've changed the border-top for border-left on each of the selectors on my Edit. — Rafael Merlin, Dec 11 '14 at 16:11
They were a little different in my CSs because it is not the default Superfish CSS. It came with a template. Thanks, though. — MB34, Dec 11 '14 at 23:29

SuperFish Menu sub-menu arrow styles

2 Answers2