Hello, I'm new to web design and would greatly appreciate any assistance.
I've been learning HTML and CSS through a live project but have run into trouble with positioning nested list items.
This is how my web browser renders the page:
Here's 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>
And here's 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 adjust the positioning of the children so that they align to the far left of the sidebar, directly below the parent li?
Thank you in advance for your help, and please forgive any mistakes in my English or code. I truly appreciate any assistance!