Movable Typeのカテゴリリストで階層別に背景画像を変更する

Movable Typeのカテゴリリストで階層別に背景画像を変更する方法です。
ユーザーコミュニティで質問したところ、小粋空間さまの
エントリーで回答を頂けました。

私が使用したかったのは、2つ目の親カテゴリをH3で表示するだったので
こちらのタグを使用。

ところが、何故か思ったように表示できなくて、四苦八苦してたんですが
私の方のCSSの書き方が問題だったようです
なので、そこら辺の覚書です。

親カテゴリはH3をあてるのでクラス名は付けないとして
子カテゴリ（child）と孫カテゴリ（grandchild）孫カテゴリ最後（grandchild last）それぞれの背景画像をあてます。

#left-sidebar li.child a{
margin: 0px auto;
padding: 1px 0px 0px 20px;
display: block;
font-size: 14px;
color: #333;
background: url(img/cat-child.gif) no-repeat;
width: 230px;
_width: 250px;
height: 20px;
}

#left-sidebar li.grandchild a{
margin: 0px auto;
padding: 0px 0px 0px 15px;
display: block;
font-size: 12px;
color: #333;
background: url(img/cat-grandchild.gif) no-repeat;
width: 215px;
_width: 230px;
height: 20px;
line-height: 20px;
}

#left-sidebar li.last a{
margin: 0px auto;
padding: 0px 0px 0px 15px;
display: block;
font-size: 12px;
color: #333;
background: url(img/cat-grandchild-b.gif) no-repeat;
width: 215px;
_width: 230px;
height: 20px;
line-height: 20px;
}

最初、このようにスタイルシートを書いてたんですが、どうしても
子カテゴリに背景画像が表示されない！というところで躓きました。

まあ、ものすごいつまらない所で間違えてたんですが、スタイルシートでは
ハイパーリンクにきくように指示しているので、子カテゴリにリンクが
張られてなければ当然スタイルシートはききません。

そんな訳で、子カテゴリの部分は#left-sidebar li.child { に変更。

すると今度は、孫カテゴリがごちゃっと縮まって文字が重なり正常に表示されません。

問題は、表示結果で子カテゴリのul liの中に孫カテゴリのul liが内包されているので
子カテゴリの高さ指定が邪魔だったのでした。

なので、高さを削除し、背景画像の位置を指定しました。

#left-sidebar li.child{
margin: 0px auto;
padding: 1px 0px 0px 20px;
display: block;
font-size: 14px;
color: #333;
background: url(img/cat-child.gif) no-repeat top;
width: 230px;
_width: 250px;
}

これで解決です。しかしホントに単純なミスでお恥ずかしい