Question

我在使用下拉子菜单在我的网站上正确对齐时遇到问题。从这里可以看出（http://jsfiddle.net/rjgunning/ehjm3t9s/2/）

下拉菜单的父菜单完全合理。在完全证明这一切之前，一切都正确对齐向左浮动似乎不会使下拉菜单与父列表元素的左侧对齐。我目前正在使用margin-left: 120px

设置其位置

谁能看到我错过的东西？

这是我菜单的相关CSS

nav#subnav ul.menu {
    width: 100%;
    text-align: justify;
    list-style: none;
}
nav#subnav ul.menu li.menu-item {
    width: auto;
    display: inline;
    float:none;
}

/* --- Drop-down Menu --- */
nav#subnav ul.menu li.menu-item ul.sub-menu{
    position: absolute;
    display: none;
}

nav#subnav ul.menu li.menu-item:hover ul{ 
    display: block;
}

nav#subnav ul.menu li.menu-item:hover ul.sub-menu li.menu-item{ 
    float: left;
    margin-left: 120px; /* Needs fixed properly*/
}

nav#subnav ul.menu:after {
    content: "";
    width: 100%;
    display: inline-block;
}

菜单html：

<nav id="subnav">
    <div class="menu-sub-menutmp-container">
        <ul id="menu-sub-menutmp" class="menu">
            <li id="menu-item-1414" class="menu-item"><a href="...">Home</a></li>
            <li id="menu-item-51" class="menu-item menu-item-has-children"><a href="...">About the MCR</a>
                <ul class="sub-menu">
                    <li id="menu-item-1015" class="menu-item"><a href="...">Committee 2014/15</a></li>
                    <li id="menu-item-1116" class="menu-item"><a href="...">Contact</a></li>
                </ul>
            </li>
            <li id="menu-item-1414" class="menu-item"><a href="...">Home</a></li>
            <li id="menu-item-1414" class="menu-item"><a href="...">Home</a></li>
            <li id="menu-item-1414" class="menu-item"><a href="...">Home</a></li>
            <li id="menu-item-1414" class="menu-item"><a href="...">Home</a></li>
            <li id="menu-item-1414" class="menu-item"><a href="...">Home</a></li>
</ul></div> </nav>

编辑：添加了html菜单 EDIT2：添加了jsfiddle示例

Answer 1

修正了它

需要添加

nav#subnav ul.menu li.menu-item-has-children {
    position: relative
}

CSS对齐下拉子菜单以使对齐的菜单

1 个答案: