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 use CSS on an Html.ActionLink in C#

    How to create HTML5 popup with minimize etc

    css ul li nested menu with a padding. How on hoover retain width of the menu?

    How to correctly use text overflow in bootstrap

    how to create Hollow triangle in css [duplicate]

    How to achieve “background-image: cover” CSS effect for dynamic images?

    How to change element CSS class when different part of web page is present?

    How can I get facing html elements to left-align and right-align, respectively, preferably using CSS?

    CSS How to make element in the middle to shrink before its sibling jumps down

    How to dynamically change css style based on INPUT value?

    How to assign inner shadow to inputs in CSS

    How do I make my background-color fill entire width of div when applied to a `ul li`?

    How to make div access the remaining space without using fixed height values?

    css float: left clash/collision, how to avoid?

    How to make arrow in CSS with angle?

    How to apply a defined class to a new class in my css?

    How to temporarily modify the CSS of an element

    javascript or css: How to Hide any Number followed by dot Prefix “1.text”, “2.text”…“30.text” from a Text inside a Label

    How to choose second and third element (li) in
      tag (with CSS)?

    How to disable mask on selected image in the f/ckeditor in webkit, opera browsers?

    how to increase the size of background image to cover all backgroung (but no repetition) [closed]

    How do I center numbers in a table from Google Visualization API?

    css3 : how to make div go up to bottom of page?

    how to change a css class onclick?

    How do browsers process and apply CSS styles to DOM elements?

    How to insert css code in php?

    How can I create a CSS “well” effect similar to bootstap but deeper?

    How to make a very simple coloured 1-line text area?

    How to vertical align text in the middle without changing size of a div

    How to add a specific class to select2 drop element?