SuperFish Menu 子菜单箭头样式答案

【问题标题】：SuperFish Menu sub-menu arrow stylesSuperFish Menu 子菜单箭头样式
【发布时间】：2014-12-12 00:41:12
【问题描述】：

如何更改 Superfish 菜单上箭头的样式？除了我的布局样式表之外，我在任何地方都找不到任何样式，并且它没有定义箭头。

第二级菜单有 sf-arrows 类，它显示一个向下箭头与一个向右箭头，就像第三级一样。如何将第二级的箭头样式更改为右箭头？

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>

【问题讨论】：

标签： drop-down-menu superfish

【解决方案1】：

我已经在 Superfish v 1.7.5 上对此进行了测试。

这个箭头实际上是一个使用不透明度的边框。

你只需要从左边而不是顶部开始。

将您的 superfish.css 中的所有border-top 替换为border-left。例子：

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

必须替换为：

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

还有

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

必须替换为：

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

我相信这会改变箭头方向。我在这里进行了测试，显然它已经奏效了。

编辑：

我在这里更改了选择器以使其正常工作：

.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 */
}

【讨论】：

如果你说 WHAT 选择器会有帮助，因为有几个。
刚刚添加到这里。我在我的 Edit 上的每个选择器上更改了border-top 为border-left。
它们在我的 CSS 中有点不同，因为它不是默认的 Superfish CSS。它带有一个模板。不过，谢谢。

【解决方案2】：

           <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>

【讨论】：

嗯？你在这里发什么？
作为他理解的问题，我通过相同的代码展示了他在问题上所写的确切灵魂。如果他需要一个列表和列表菜单项，那么他必须在 li 标签中包含 li 标签