CSS Forum

**homerjay** · 01-07-2008, 08:56 AM

Hello,

I'm trying to accomplish this unordered list and having difficulty.

-------------------
Header
> Item1
> Item 2
View More...

Header
> Item1
> Item2
View More...
---------------------

Code:

.header li
{
    list-style: none;
}

.header li a {
    text-decoration: none;
}
}
.subprod li {

}
.subprod li a {
    text-decoration: none;
}





<ul class="header">
    <li>Home Purchase</li>
        <ul class="subprod">
            <li><a href="#">JUMBO</a></li>
            <li><a href="#">Fixed / ARM</a></li>
            <li><a href="#">Adjustable ARM</a></li>
            <li><a href="#">Stated Income</a></li>
            <li><a href="#">Interest Only</a></li>
            <li><a href="#">View More....</a></li>
        </ul>
     <li>Refinance</li>
        <ul class="subprod">
            <li><a href="#">Cash Out Refinance</a></li>
            <li><a href="#">Debt Consolidation</a></li>
            <li><a href="#">Fixed / ARM</a></li>
            <li><a href="#">View More....</a></li>
        </ul>
     <li>Home Equity Loan</li>
        <ul class="subprod">
            <li><a href="#">HELOC - Line of Credit</a></li>
            <li><a href="#">Home Equity Loan</a></li>
            <li><a href="#">High LTV's</a></li>
            <li><a href="">View More....</a></li>
        </ul>
</ul>

the child list items should have a list style but the parent should not.
I tried doing this with separate classes for parent and child list items and was not successful. Any suggestions.

I also want to be able to indent the last list item before the next parent list item.

Thanks

**Majic** · 01-07-2008, 09:08 AM

Quote:

Originally Posted by homerjay

Hello,

I'm trying to accomplish this unordered list and having difficulty.

-------------------
Header
> Item1
> Item 2
View More...

Header
> Item1
> Item2
View More...
---------------------

the child list items should have a list style but the parent should not.
I tried doing this with separate classes for parent and child list items and was not successful. Any suggestions.

I also want to be able to indent the last list item before the next parent list item.

Thanks

Code:

.header li
{
    list-style: none;
}

.header li a {
    text-decoration: none;
}
.header ul li {
    list-style: inherit;
}




<ul class="header">
    <li>Home Purchase</li>
        <ul>
            <li><a href="#">JUMBO</a></li>
            <li><a href="#">Fixed / ARM</a></li>
            <li><a href="#">Adjustable ARM</a></li>
            <li><a href="#">Stated Income</a></li>
            <li><a href="#">Interest Only</a></li>
            <li><a href="#">View More....</a></li>
        </ul>
     <li>Refinance</li>
        <ul>
            <li><a href="#">Cash Out Refinance</a></li>
            <li><a href="#">Debt Consolidation</a></li>
            <li><a href="#">Fixed / ARM</a></li>
            <li><a href="#">View More....</a></li>
        </ul>
     <li>Home Equity Loan</li>
        <ul>
            <li><a href="#">HELOC - Line of Credit</a></li>
            <li><a href="#">Home Equity Loan</a></li>
            <li><a href="#">High LTV's</a></li>
            <li><a href="">View More....</a></li>
        </ul>
</ul>

Let me know if that's what you wanted.

**LadynRed** · 01-07-2008, 11:33 AM

That is still incorrect:

Quote:

<ul class="header">
<li>Home Purchase
<ul class="subprod">
<li><a href="#">JUMBO</a></li>
<li><a href="#">Fixed / ARM</a></li>
<li><a href="#">Adjustable ARM</a></li>
<li><a href="#">Stated Income</a></li>
<li><a href="#">Interest Only</a></li>
<li><a href="#">View More....</a></li>
</ul>
</li>
<li>Refinance
<ul class="subprod">
<li><a href="#">Cash Out Refinance</a></li>
<li><a href="#">Debt Consolidation</a></li>
<li><a href="#">Fixed / ARM</a></li>
<li><a href="#">View More....</a></li>
</ul>
</li>

<li>Home Equity Loan
<ul class="subprod">
<li><a href="#">HELOC - Line of Credit</a></li>
<li><a href="#">Home Equity Loan</a></li>
<li><a href="#">High LTV's</a></li>
<li><a href="">View More....</a></li>
</ul>
</li>
</ul>

The top level <li> item must encompass the sub-menu ul.

**Majic** · 01-07-2008, 08:02 PM

My bad. I wasn't looking at the html part.
All you really need to do is change this part of the css and as LadynRed said, your html code to be valid and it should work fine.

Code:

.subprod li {
    list-style: inherit;
}