こんにちは。
navタグ内に、ulタグを入れて、上下二段で構成された目次を作りたいと考えています。
- 一段目にメインの目次を横に並べます。
- 二段目に、「一段目で選んだ目次」のサブコンテンツの目次を横に並べます。
次のようにhtmlを書きました。
cssをいろいろ試しましたが、メインの目次のうち、1番目と2番目の間が開いてしまいます。（1番目のサブコンテンツである二段目の目次の幅だけ、横に開いてしまう）
このようなhtmlの書き方で、1番目と2番目の間を空けずに、上下二段に目次を並べることはできるでしょうか。
どなたかご教授願えないでしょうか。
よろしくお願いいたします。
-----
<nav id="menu">
<ul>
<li class="menu_A here">
<a href="#">ニュース</a>
<ul>
<li class=""><a href="#">スポーツ</a></li>
<li class=""><a href="#">ダイエット</a></li>
</ul>
</li>
<li class="menu_B">
コラム
</li>
<li class="menu_C">
まとめ
</li>
</ul>
</nav>
-----
みんなの回答 7 件
スタイルも書いてほしいな
色々おかしい
書き方が下手で、申し訳ないです。
もともと、divばかりで構成するhtmlを書いていたので、
よそのHPを参考にさせてもらいながら、htmlの書き方を勉強している所です。
CSSも追加しました。
お手数ですが、よろしくお願いいたします。
------
<html>
<head>
<style type="text/css">
ul,li {
margin:0;
padding:0;
list-style: none;
}
#menu li {
}
.menu_A a {
background: #ff668f;
}
.menu_A li {
background: white;
}
nav li {
float: left;
text-align: center;
font-weight: bold;
border-right: solid 1px #000;
border-left: solid 1px #FFF;
}
nav li a {
display: block;
width: 100px;
padding: 5px 10px;
text-decoration: none;
border-bottom: solid 1px #000;
color: #FFF;
}
nav li a:hover {
background: #FFF;
padding: 5px 10px;
text-decoration: none;
border-top: solid 1px #F90;
border-bottom: solid 1px #FFF;
color: #F90;
}
</style>
</head>
<body>
<nav id="menu">
<ul>
<li class="menu_A here">
<a href="#">ニュース</a>
<ul>
<li class=""><a href="#">スポーツ</a></li>
<li class=""><a href="#">ダイエット</a></li>
</ul>
</li>
<li class="menu_B">
コラム
</li>
<li class="menu_C">
まとめ
</li>
</ul>
</nav>
</body>
</html>
------
ちなみに、目次箇所の書き方を参考にさせていただいたのは、
「日経Gooday」さんです。
違いに愕然とされると思いますが、
シンプルできれいなデザインの書き方を勉強させてもらいたいと思いました。
スタイルシートを探したのですが、よくわからず…。
> メインの目次のうち、1番目と2番目の間が開いてしまいます。
ボーダーのせいです。わかりずらいので装飾はあとにつけましょう。
CSS HTMLはいじってないけど、そのままのHTMLだと使用がわかりずらい。
* {
margin: 0;
padding: 0;
}
ul,li {
list-style: none;
}
a {
color:#666;
text-decoration: none;
}
.menu_A > a {
background: #ff668f;
}
.menu_A li {
background: white;
}
nav li {
float: left;
text-align: center;
}
nav > ul > li {
float: left;
display: block;
width: 318px;
}
nav > ul > li > a {
background-color: #e6e6e6;
display: block;
padding: 5px auto;
color: #FFF;
}
nav > ul > li > a:hover {
background-color: #0000ff;
padding: 5px auto;
color: #F90;
}
nav > ul > li > ul {
width: 960px;
display: none;
}
nav > ul > li > ul > li {
margin-right: 10px;
}
nav > ul > li.here > ul {
display: block;
}
具体的に書いていただき、ありがとうございます！
「>」でどのタグにスタイルを適用するか指定することで、
シンプルに、きれいなHTMLでレイアウトを実現できるんですね。
自分で考えていたら、変に凝った書き方をしてしまったと思います。
とても勉強になりました。
関連するトピックス