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

Fiddle

Answer 1

ul元素具有由用户代理应用的默认padding-left值，因此通过删除它可以获得您要求的对齐（您还添加了一个边距，但我是因为你自己添加了它会忽略它。

#toolbar ul {
    padding-left: 0;
}

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

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

Demo

Answer 2

adonis说的绝对正确。还有一些其他元素采用默认填充和边距。因此，在设置任何元素的样式之前，请尝试使用reset。

*{margin:0;padding:0;}

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

Answer 3

在这种情况下有margin和padding（您自己添加保证金），这会影响它。

View here for a fix

(this has outlines for more visual proof)

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;

}