リスト表示の2、3階層目のスタイルを変える


リスト表示はよく使うのですが、3階層目まで発生することがあまり無いのでタグを忘れてしまうんですよね…。覚書きしときます。

  • 1階層目は四角
  • 1階層目は四角
    • 2階層目は黒丸
  • 1階層目は四角
    • 2階層目は黒丸
      • 3階層目画像

HTML

  • 1階層目は四角
  • 1階層目は四角
    • 2階層目は黒丸
  • 1階層目は四角
    • 2階層目は黒丸
      • 3階層目画像

CSS

ul.kaisou li {
margin:0.5em 0 0.5em 30px;
list-style: square;   /* 一階層目マーク指定 */
}

ul.kaisou li ul li {
list-style: disc;   /* 二階層目マーク指定 */
}

ul.kaisou li ul li ul li {
margin:0.5em 0 0.5em 15px;   /* 画像の位置によって要調整 */
padding:0 0 0 15px;          /* 画像の位置によって要調整 */
list-style: none;
background:url(img/sub_menu_btn.gif) 0px 4px no-repeat;   /* 三階層目画像指定 */
}

コメントは受け付けていません。