Question

我需要建立一个菜单（在悬停时）＆＃34; popup＆＃34;子菜单，具有级别2的子菜单的描述和列表。实际上，出于测试目的，我不隐藏子菜单。

我的测试代码：

＆＃13;

app.getPrimaryStage().getScene().cursorProperty().addListener((obs, oldValue, newValue) -> { System.out.println(newValue); });

＆＃13;

.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;
            }
        }
    }
}

＆＃13;

这给（当SCSS激活时）这样的事情（JsFiddle here）

这没关系，因为我需要将列表中的项目符号右对齐，文本中心对齐。

我需要用自定义符号替换子弹＆＃34;＆gt;＆＃34 ;;

1. *理想情况下＆＃34;＆gt;＆＃34;符号应该是＆＃34;链接＆＃34;主链接
我需要修复＆＃34; bug＆＃34;在右边（？）显示数字时的第二个子菜单（应该是＆＃34; 2子菜单＆＃34;而不是＆＃34;子菜单2＆＃34;）。 ..

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。您可以使用：before或：after伪元素，并为其设置任何字符或背景图像。最好使链接更大display:block并将我们的伪元素相对于它定位。

用自定义符号替换列表项目符号（右对齐）

1 个答案: