用自定义符号替换列表符号(右对齐)

Question

我需要建立一个菜单(悬停)将“弹出”一个子菜单，有一个描述和子菜单列表的第2级。实际上，为了测试目的，我不隐藏子菜单。

我的测试代码：

​

.menu-l1>li {
    display: inline-block;
    padding: 0 20px;
}
.details {
    position: absolute;
    background: yellow;
    margin-top: 1em;    
    ul {
        direction: rtl;
        margin-left: 0;
        li {
            text-align: center;
            &:nth-child(odd) {
                background: lightblue;
            }
            &:nth-child(even) {
                background: lightgreen;
            }
        }
    }
}

<ul class="menu-l1">
    <li><a href="#">first menu</a>
        <div class="details">
            <div>header</div>
            <ul class="menu-l2">
                <li><a href="#">sub</a></li>
                <li><a href="#">sub long</a></li>
            </ul>
        </div>
    </li>
    <li><a href="#">second menu</a>
        <div class="details">
            <div>2 header</div>
            <ul class="menu-l2">
                <li><a href="#">1 sub-menu long</a></li>
                <li><a href="#">2 sub-menu</a></li>
            </ul>
        </div>
    </li>
</ul>

​

这提供了(当SCSS激活时)这样的东西(JsFiddle在这里)

​

​

这没问题，因为我需要列表中的符号对齐，文本中心对齐。

1. 我需要用自定义符号“>”代替子弹； 1.*理想情况下，">“符号应与主链接”链接“。
2. 当在右边显示数字时，我需要修复第二个子菜单的"bug“。(应该是"2子菜单“而不是”子菜单2“).

Answer 1

http://jsfiddle.net/JDERf/598/

这里只作改动：

ul {
    padding:0;
    list-style:none;
    li {
        a {
            display: block;
            padding:0 1em 0 0;
            position: relative;
            &:after {
                content:">";
                position: absolute;
                right:0;
            }
        }
    }

你不需要rtl。您可以使用:前面或:后伪元素，并为它设置任何字符或背景图像.最好用display:block使链接更大，并将我们的伪元素相对于它定位.