html - 在 CSS 中对齐下拉菜单

Question

我似乎无法制作下拉菜单 <ul>与它的 parent 对齐 <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