html - 如何让子菜单向左下拉？

Question

以下代码来 self 正在处理的一个 wordpress 主题 CSS 文件。子菜单曾经出现在父级的右侧，但我添加了“left: 0;”在第一个 css 代码块中，现在它自己与父菜单的左侧对齐(因此位于下拉菜单的顶部)。

如何修改代码，使子菜单显示在父菜单的左侧？

/* =DROP DOWN
----------------------------------------------- */
.main-navigation ul li ul,
.main-navigation ul li:hover ul ul,
.main-navigation ul ul li:hover ul ul,
.main-navigation ul ul ul li:hover ul ul,
.main-navigation ul ul ul ul li:hover ul ul {
    display: none;
        left: 0;
    position: absolute;
    z-index: 9999;
}
.main-navigation ul li:hover ul,
.main-navigation ul ul li:hover ul,
.main-navigation ul ul ul li:hover ul,
.main-navigation ul ul ul ul li:hover ul,
.main-navigation ul ul ul ul ul li:hover ul {
    display:block;
}
.main-navigation ul li ul {
    position: absolute;
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.8);
    border-top: 1px solid #0FBE7C;
    top: 45px;
    left: 25px;
    width: 150px;
}
.main-navigation ul li ul li {
    float: none;
    border-bottom: 1px solid #EAEAEA;
    padding: 0;
}
.main-navigation ul li ul li a,
.main-navigation ul li.current-menu-item ul li a,
.main-navigation ul li ul li.current-menu-item a,
.main-navigation ul li.current_page_ancestor ul li a,
.main-navigation ul li.current-menu-ancestor ul li a,
.main-navigation ul li.current_page_item ul li a {
    float: none;
    line-height: 21px;
    font-size: 13px;
    font-weight: normal;
    height: 100%;
    padding: 6px 10px;
    color: #666666;
}
.main-navigation ul li ul li a:hover, .main-navigation ul li ul li:hover > a, .main-navigation ul li.current-menu-item ul li a:hover {
    background: none repeat scroll 0 0 rgba(255, 255, 255, 1);
    color: #0FBE7C;
}
.main-navigation ul li ul li ul {
    left: 150px;
    top: -1px;
}
.main-navigation select {
    display: none;
}

Answer 1

使用 right: 0 而不是 left: 0;

现在子菜单的右侧将与父菜单对齐。