how to position nested list items?

Tags: html,css,html5,html-lists,css-position

Problem :

Well I'm a web design newbie. Any help would be appreciated.

I'm learning html and css by doing a live project and got stuck in positioning nested list items.

My web browser render look like this.

My 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>

My CSS:

for the nav side bar

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

for the parent li

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

for the children li

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

How can I position the children to align to the extreme left of the sidebar? At least just below the parent li?

Thank you so much for helping out, and sorry for my horrible English and code. Thanks for any help.

---

Solution :

Reset the default styles applied by the browser to ul tags.

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

Also remove the left padding from .sidebar-parent.