Question

HTML

<div id="dropmenu" class="dropmenu">
    <login>
        <ul>
            <li><a href="/menu1">Menu1</a>
            <li> <a href="javascript:void(0);">Username</a>

                <ul>
                    <li><a href="/profile">Profile</a>
                    </li>
                    <li><a href="/transactions">Transactions</a></li>
                    <li><a href="/account/sign-out" data-load="refresh">Logout</a>
                    </li>
                </ul>
            </li>
        </ul>
    </login>
</div>

的CSS

.dropmenu ul {
    list-style-type: none;
}

/* login menu */
 .dropmenu login ul {
    margin: 0;
}
.dropmenu login > ul > li {
    float: right;
    border: 1px solid red;
}
.dropmenu login > ul > li > a {
    display: inline-block;
    padding: 10px 20px;
    color: #ffffff;
}
.dropmenu login > ul > li > a:hover {
    background-color: #f3f5f5;
    color: #545d5f;
}
#cart-button {
    font-size: 14px;
}
/* login drop-down */
 .dropmenu login ul ul {
    display: none;
    position: absolute;
}
.dropmenu login ul > li:hover ul {
    display: block;
}
/* login sub-menu */
 .dropmenu login > ul > li > ul > li > a {
    display: inline-block;
    width: 100px;
    padding: 10px 20px;
    background: rgb(130, 160, 46);
    background: rgba(130, 160, 46, 0.92);
    color: #ffffff;
}
.dropmenu login > ul > li > ul > li > a:hover {
    background-color: #f3f5f5;
    color: #545d5f;
}

如何制作，以便下拉菜单与其父级对齐？

http://jsfiddle.net/31bvbve4/

Answer 1

这个CSS应该适合你：

.dropmenu login > ul > li {
    position: relative;
}

.dropmenu login ul ul {
    position: absolute;
    right: 0;
    top: 100%;
}

FIDDLE：https://jsfiddle.net/lmgonzalves/31bvbve4/1/

带有子菜单的CSS下拉菜单，对齐其右侧的父级

1 个答案: