Add Border-bottom To Nested List Items

I want to add a bottom border to every list item with css. Here is my CSS code: ul,ol{ li{ list-style-type: none; margin: 0; padding: 0; padding

Solution 1:

Demo

Give a class to your ul say demo

.demo li {
   border-bottom: 1px solid #000;  
}

If you want each and every li in your website should get border-bottom which won't be a great idea than use

ul li {
   border-bottom: 1px solid #000;
}

If you want to indent your nested li you can use text

Solution 2:

The syntax you have posted in the question is wrong. (you cannot do nesting in CSS rules)

The equivalent correct syntax is

li{
    list-style-type: none;
    margin: 0;
    padding: 0;
    padding-top: 3px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #eeeeee;
}

 li ul, 
 li ol{
    margin-left: 2em;
}

Solution 3:

i'm not sure i understund you very well, but there is simple code for You:

HTML

<div>
    <ul class="list-1">
        <li class="item-1">Item 1
            <ul class="list-1-1">
                <li>Item 1-1</li>
            </ul>
        </li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

CSS

ul.list-1 li.item-1, ol.list-1 li.item-1 {
        list-style-type: none;
        margin: 0;
        padding: 0;
        padding-top: 3px;
        padding-bottom: 10px;
        margin-bottom: 10px;
        border-bottom: 1px solid #eeeeee;   
}
ul.list-1 li.item-1 ul.list-1-1 , ol.list-1 li.item-1 ul.list-1-1 {
    margin-left: 2em;
}
ul.list-1-1 li {
    border-bottom: 1px solid #eeeeee;
}

DEMO

http://jsfiddle.net/jVcFb/1/