CSSテクニックコミュのulタグの入れ子でサイトマップ

サイトマップをulタグの入れ子で作成しようとしているのですが、IEだけ親のliタグ（カテゴリB）に触れなくなっています。
Dreamweaverのデザインでも触れなくなっているので、CSSが悪いことはわかっているのですが…

そもそもサイトマップをulタグの入れ子で記述するのは、正しいマークアップなのでしょうか？

初歩的なことで申し訳ございませんm(__)m

どなたかご教授宜しくお願い致します。

----------CSS----------
ul#sitemap li{
　list-style: none;
　line-height:1.5em;
　border-bottom: 1px dotted #EFEFEF;
　margin: 0.2em;
}
ul#sitemap li ul{
　margin-top: -1.8em;
}
ul#sitemap li ul li{
　border-bottom: none;
　margin-left: 170px;
}

----------HTML---------
<ul id="sitemap">
<li><a href="a.html">カテゴリA</a></li>
<li><a href="b.html">カテゴリB</a>
<ul>
<li><a href="b-1.html">カテゴリB-1</a></li>
<li><a href="b-2.html">カテゴリB-2</a></li>
</ul>
</li>
<li><a href="c.html">カテゴリC</a></li>
<li><a href="d.html">カテゴリD</a></li>
</ul>

コメント(6)

最初
全て
最新の40件

[1] mixiユーザー 09月14日 20:46

問題ありません。やっちゃってください。

ただ、これに関しては、ulタグにあわせて、dl、dt、ddタグを利用してしまうのがきれいだと思いますよ。

具体的な利点は３つ。

＊実際にそのほうが文書構造として分解されているのできれい

＊CSSのdisplayと:hoverを組み合わせることでポップアップメニュをJavaScriptなしで使える。

＊そのうえでxhtml2.0(策定中)のnlタグ(Navigation　list)とほぼ対応するタグ関係が作れる。

[2] mixiユーザー 09月14日 21:00

横幅のサイズ指定が行なわれていないブロック要素を重ねたからかと思います。
width属性を追記してみてください。

他、気になったのがulやliでmargin-leftが指定されていないものがありますが、ブラウザ間で表示を統一するためにも指定したほうがベターかと。
margin-left: 170px;も指定していない部分（ブラウザの初期設定のマージンが適用されている）があると、正確なレイアウトはできません。

ulタグの入れ子は問題ないと思います。

[3] mixiユーザー 09月14日 21:57

CSS のどれかに
position: relative;
いれてみたらどうでしょう。

[4] mixiユーザー 09月14日 23:30

どんな形のサイトマップを制作したいのかわかりませんが、
以下のような設定で階層表示がされるようになりますが。

ul#sitemap{
margin: 0;
padding: 0;
}
ul#sitemap ul{
margin: 5px 0px 5px 20px;
padding: 0;
}

ul#sitemap li a{
margin: 0;
padding: 10px 0;
}

ulの入れ子はどこもよく使っているタグです。
CSSが無効の場合でも階層的に表示されるので
サイトマップやナビゲーションメニューにはよく使われます。

WEB標準を意識するのであれば、ulの入れ子がベストであると思いますよ。

[6] mixiユーザー 09月15日 16:25

皆様、早速のご教授ありがとうございます。

＞baban様
dlタグを使用するには、カテゴリBをdt、カテゴリB-1をddということでしょうか？
しかし、カテゴリAなどdd要素がない場合も発生するのですが、その場合、タグ的には正しいのでしょうか？
dlタグですと、2段カラムは楽ですねぇ～

＞ヨシトミ様、イチロー様
ご指摘のとおりwidthを設定またはpositionを設定したら、カテゴリBのリンクに触れました。
（ul#sitemap li ul{margin-top: -1.8em;width:90%;}を追加）
きちんとしたwidthを設定すると、カテゴリB-1など子供がいない場合に、きちんと線が表示できなくなってしまい…

そして、WinIE5では相変わらず触れませんでした。

また、大元のCSSでブラウザのリセットをしており、
*{ margin:0px; padding:0px;}
再設定の部分のみ、記述しております。

＞かわちゃん様
2カラムで表示したいと思っています。
カテゴリごとに下線を表示したいのです。

ログインすると、みんなのコメントがもっと見れるよ