css - 如何定位嵌套列表项？

Question

嗯，我是一名网页设计新手。任何帮助，将不胜感激。

我正在通过实际元素学习 html 和 css，但在定位嵌套列表项时遇到了困难。

我的网络浏览器渲染看起来像这样。

我的 HTML:

<nav class="nav-sidebar">
<ul class="sidebar-ul">
    <li class="sidebar-parent">parent-item-1
        <ul class="sidebar-sublist">
            <li class="sidebar-children">child 1</li>
            <li class="sidebar-children">child 2</li>
        </ul>
    </li>
    <li class="sidebar-parent">parent-item-2
        <ul class="sidebar-sublist">
            <li class="sidebar-children">child 1</li>
            <li class="sidebar-children">child 2</li>
        </ul>
    </li>
    <li class="sidebar-parent">parent-item-3
        <ul class="sidebar-sublist">
            <li class="sidebar-children">child 1</li>
            <li class="sidebar-children">child 2</li>
        </ul>
    </li>
</ul>
</nav>

我的 CSS:

用于导航侧边栏

.nav-sidebar{
width: 250px;
background: #444444;
position: fixed;
height: 100%;}

为父李

.sidebar-parent{
display: block;
width: auto;
padding-right: 5px;
padding-left: 20px;
border-bottom: 1px solid #211D1D;
text-transform: uppercase;
font-size: 1em;
font-family: helvetica;
text-decoration: none;
background: #2D2828;}

为了 children

.sidebar-children{
text-decoration: none;
text-transform: lowercase;
color: #efefef;
background: #000000;
padding-right: 5px;
padding-left: 20px;
width: auto;
display: block;}

如何定位子项以对齐到侧边栏的最左侧？至少在父 li 之下？

非常感谢您的帮助，对于我糟糕的英语和代码感到抱歉。感谢您的帮助。

Answer 1

重置浏览器应用到 ul 标签的默认样式。

.sidebar-sublist{
    padding: 0px;
    margin: 0px;
}

同时从 .sidebar-parent 中删除左边的填充。