css - 如何更改下拉子菜单中的侧箭头和方向箭头？

Question

我使用下拉子菜单创建菜单。

.dropdown-menu {
    float:left;
}

.left-submenu {
    float: none;
}

.left-submenu > .dropdown-menu {
    border-radius: 6px 0px 6px 6px;
    left: auto;
    margin-left: 10px;
    right: 98%;
}

<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
    <li><a tabindex="-1" href="#">Action</a></li>
    <li><a tabindex="-1" href="#">Another action</a></li>
    <li><a tabindex="-1" href="#">Something that is a really really really long string here</a></li>
    <li class="dropdown-submenu left-submenu"> <a tabindex="-1" href="#">Try left</a>
        <ul class="dropdown-menu">
            <li><a tabindex="-1" href="#">shorter things</a></li>
            <li><a tabindex="-1" href="#">shorter things</a></li>
            <li><a tabindex="-1" href="#">shorter things</a></li>
        </ul>
    </li>		
    <li class="divider"></li>
    <li class="dropdown-submenu left-submenu"> <a tabindex="-1" href="#">More else</a>
        <ul class="dropdown-menu">
            <li><a tabindex="-1" href="#">Second level link</a></li>
            <li><a tabindex="-1" href="#">Second level link</a></li>
            <li><a tabindex="-1" href="#">Second level link</a></li>
            <li><a tabindex="-1" href="#">Second level link</a></li>
        </ul>
    </li>
</ul>

如何更改下拉子菜单“尝试向左”中的侧箭头和方向箭头？

此处演示 http://jsfiddle.net/5BUXu/20/

附注想要在图片上得到相同的结果

Answer 1

您只需要“翻转脚本”。箭头位于 :after 中在 bootstrap CSS 中，您需要重写它，翻转所有使其显示正确的内容，如下所示:

.dropdown-submenu>a:after {
    display: block;
    content: " ";
    float: left;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 5px 5px 0;
    border-right-color: #cccccc;
    margin-top: 5px;
    margin-left: -10px;
}

JSFiddle

所以 float现在左边而不是右边，border-right-width现在是 5px 而不是 border-left-width , 和 margin-right现在是margin-left .

要使一个元素有一个左箭头和一个元素有一个右箭头，您需要添加一个类，或者当您知道元素的数量是固定的时，您可以使用 nth-child 选择器。像这样:

With class added

<li class="dropdown-submenu right-submenu"> <a tabindex="-1" href="#">

.dropdown-submenu.right-submenu>a:after {
    display: block;
    content: " ";
    float: left;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 5px 5px 0;
    border-right-color: #cccccc;
    margin-top: 5px;
    margin-left: -10px;
}

With nth-child selector

.dropdown-submenu:nth-child(4)>a:after {
    display: block;
    content: " ";
    float: left;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 5px 5px 0;
    border-right-color: #cccccc;
    margin-top: 5px;
    margin-left: -10px;
}