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.

enter image description here 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.


    CSS Howto..

    How to position an image sprite at the bottom of an element of unknown height

    How to change css position left to right using jquery?

    How to apply animation on the list items such that during an instance of time only one list item is visible?

    How do I bottom-align bars in a CSS vertical bar chart?

    how to give css height a percentage of a different div (above original div)

    How to disable CSS minifier in Liferay?

    How to make vim alphabetically sort CSS rules within a single line?

    How to access and modify imported .css files in WordPress style.css file?

    How To Restrict Width of Bootstrap 3 Dropdown-Menu in Navbar

    How to hide second row of a table using css?

    How to use different kind of Google Font types?

    CSS - how to hide the top of a container using CSS-height, vertical-align and overflow?

    How do I isolate an image from the html so that I can edit where it goes on the website?

    how to make a div stay in a div

    CSS how to transition(with transform) a parent and child both, differently

    How to layout follow content using CSS?

    How to make CSS Column Design quickly?

    how to use text-indent only with element not ont it's :before Selector?

    How to delete the gap

    How can I put my div “downloads” always 70px below my image

    Show header below fixed nav when clicking hash tag link

    Android - How do I create an email body from a file that contains css and html?

    How to add Navigation dropdown menu?

    How to change the background color of a line of user input in a textarea?

    How to obtain the CSS font-family of installed fonts? [duplicate]

    How can I avoid a “Flash of Unstyled Content” using fixed-width cells in CSS Tables?

    Show hidden image with jQuery

    Hide/Show menu with increase/decrease of width

    How to give reference to static resources like css,images,java script in JSP?

    How to include transparency in html/css?