在 CSS 中对齐下拉菜单

Question

我似乎无法使下拉列表<ul>与其父<li>保持一致。我做错了什么？

.HTML：

<nav id="toolbar">
    <ul>
        <li>
        <a href="#">Section1</a></li>
        <li>
        <a href="#">Section2</a>
            <ul>
                <li>
                    <a href="#">SubA</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">Section3</a>
                <ul>
                    <li><a href="#">SubB</a></li>
                </ul>
        </li>
        <li>
            <a href="#">Section4</a>
        </li>
    </ul>
</nav>

.CSS：

#toolbar ul {list-style-type:none;
}
#toolbar ul li {display:block;
                position:relative;
                float:left;
                margin:0px 5px;
}
#toolbar li ul  {display:none;
}
#toolbar ul li:hover ul {display: block;
                      position:absolute;
}

小提琴

Answer 1

ul元素

具有用户代理应用的默认padding-left值，因此通过删除，您可以获得所需的对齐方式（您还添加了边距，但由于您自己添加了它，我将忽略它）。

#toolbar ul {
    padding-left: 0;
}

或（如果您只想定位子菜单）：

#toolbar ul ul {
    padding-left: 0;
}

演示

Answer 2

阿多尼斯说的完全正确。还有其他某些元素采用默认填充和边距。因此，请尝试在设置任何元素样式之前使用重置。

*{margin:0;padding:0;}

如果页面中没有列表项需要默认项目符号，您还可以在上面的重置代码行中包含list-style:none。

Answer 3

在这种情况下

，有margin和padding（您自己添加边距）会影响它。

在此处查看修复

（这有大纲以提供更多视觉证明）

.CSS：

#toolbar ul {
    padding: 0;
    list-style-type:none;
}
#toolbar ul > li {
    display:block;
    position:relative;
    float:left;
    margin:0px 5px;
}
#toolbar li ul {
    display:none;
}
#toolbar ul li:hover ul {
    display: block;
    position:absolute;
}
#toolbar ul ul > li {
    margin: 0;
}

Answer 4

试试这个，我已经在这里粘贴了代码

.HTML：

<nav id="toolbar">
    <ul>
        <li>
        <a href="#">Section1</a></li>
        <li>
        <a href="#">Section2</a>
            <ul>
                <li>
                    <a href="#">SubA</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">Section3</a>
                <ul>
                    <li><a href="#">SubB</a></li>
                </ul>
        </li>
        <li>
            <a href="#">Section4</a>
        </li>
    </ul>
</nav>

.CSS：

#toolbar ul {list-style-type:none;
}
#toolbar ul li {display:block;
                position:relative;
                float:left;
                margin:0px 5px;
}
#toolbar li ul  {display:none;
}
#toolbar ul li:hover ul {
                         display: block;
                         position:absolute;
}
#toolbar ul li:hover ul  li{
                         margin-left: -30px;
}