Need some help with multi-level CSS formatting

HTML & CSS
1

I’m using this theme on my blog:
http://newwpthemes.com/themedemo/?wptheme=iMobile

Under the Categories section, I want to enable subcategories, but when I do so, the formatting is less than desirable, as seen in this screenshot below:

I realize I need to add some code to the style.css file to handle the additional ul/li tags being added to the subcategories, but my attempts to do so have been unsuccessful.

All I’m trying to do is indent the subcategories 5-10px to the right, and continue with the underlines under each category.

Right now, there’s no underline under Entertainment, but then double underlines after Television.

Can you help? Thanks!

2

I can’t tell from your image which items are main links and which sub categories, or quite how you want the sub categories styles (underline or not?) but you can target them like this:


.sidebar ul li ul li [COLOR="#FF0000"]ul li[/COLOR] {
  ...
}

Then you could add some margin-left etc, and either leave the underlines or remove them with background: none;

3

You may have to remove or add a li, but you could do something like this:

li li:first-child {
    border-top: 1px solid #333; 
}


li li li:first-child {
    border: none;
}


li li a {
    padding: 5px 10px;
    display: block;
    border-bottom: 1px solid grey;
}


li li li a {
    padding-left: 15px;
}

Note that using first-child will not work for IE versions below 7. And even in 7, support isn’t all that good.