リスト表示の2、3階層目のスタイルを変える
リスト表示はよく使うのですが、3階層目まで発生することがあまり無いのでタグを忘れてしまうんですよね…。覚書きしときます。
- 1階層目は四角
- 1階層目は四角
- 2階層目は黒丸
- 1階層目は四角
- 2階層目は黒丸
- 3階層目画像
- 2階層目は黒丸
<html>
<head>
<style>
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; /* 三階層目画像指定 */
}
</style>
</head>
<body>
<ul class="kaisou">
<li>1階層目は四角</li>
<li>1階層目は四角
<ul>
<li>2階層目は黒丸</li>
</ul>
</li>
<li>1階層目は四角
<ul>
<li>2階層目は黒丸
<ul>
<li>3階層目画像</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>