cssで作成する多階層リスト

締切済

質問者：akoacoako
質問日時：2014/10/02 16:42
回答数：4件

こんにちは。
cssで
・縦並びのリストに対して、マウスをもっていくと横にどんどん下位階層のリストが表示されるようする
・下位リストにマウスがいっても上位リストの選択の色はそのままにしたい
以上のように作成したいのですが、
そのcssの記述がわかりません。
色々サイトで探しましたが見つからず。。。
どなたか教えてください。
◆HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<title>多階層</title>
</head>

<body>
<br>
<div id="MainDiv">
<div id="gnav">
<ul>
<li><a href="#">テスト(1)</a>
<ul>
<li><a href="#">てすと(1)-1</a>
<ul>
<li><a href="#">ＴＥＳＴ(1)-1-1</a>
<ul>
<li><a href="#">テスト(1)-1-1-1</a>
<ul>
<li><a href="#">TEST(1)-1-1-1-1</a></li>
<li><a href="#">TEST(1)-1-1-1-2</a></li>
<li><a href="#">TEST(1)-1-1-1-3</a></li>
<li><a href="#">TEST(1)-1-1-1-4</a></li>
<li><a href="#">TEST(1)-1-1-1-5</a></li>
</ul>
</li>
<li><a href="#">テスト(1)-1-1-2</a>
<ul>
<li><a href="#">TEST(1)-1-1-2-1</a></li>
<li><a href="#">TEST(1)-1-1-2-2</a></li>
<li><a href="#">TEST(1)-1-1-2-3</a></li>
<li><a href="#">TEST(1)-1-1-2-4</a></li>
<li><a href="#">TEST(1)-1-1-2-5</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">ＴＥＳＴ(1)-1-2</a>
<ul>
<li><a href="#">テスト(1)-1-2-1</a>
<ul>
<li><a href="#">TEST(1)-1-2-1-1</a></li>
<li><a href="#">TEST(1)-1-2-1-2</a></li>
<li><a href="#">TEST(1)-1-2-1-3</a></li>
<li><a href="#">TEST(1)-1-2-1-4</a></li>
<li><a href="#">TEST(1)-1-2-1-5</a></li>
</ul>
</li>
<li><a href="#">テスト(1)-1-2-2</a>
<ul>
<li><a href="#">TEST(1)-1-2-2-1</a></li>
<li><a href="#">TEST(1)-1-2-2-2</a></li>
<li><a href="#">TEST(1)-1-2-2-3</a></li>
<li><a href="#">TEST(1)-1-2-2-4</a></li>
<li><a href="#">TEST(1)-1-2-2-5</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">てすと(1)-2</a></li>
<li><a href="#">てすと(1)-3</a></li>
<li><a href="#">てすと(1)-4</a></li>
</ul>
</li>
<li><a href="#">テスト(2)</a>
</li>
</ul>
</div>
</div>
</body>
</html>
◆CSS
body {
font-size: 13px;
font-family: "Meiryo UI", "ＭＳＰゴシック", "MS PGothic", "MS UI Gothic", "ＭＳゴシック", "ＭＳ明朝";
}

#MainDiv {
overflow: hidden;
width: 1000px;
margin: 0;
}

/* 全角カタカナ階層 */
#gnav {
float: left;
width: 150px;
height: 200px;
}

#gnav ul {
margin: 0;
padding: 0;
border-top: 1px #FFFFFF solid;
list-style-type: none;
}

#gnav ul li {
width: 150px;
height: 24px;
text-align: center;
background: #c8d6e8;
border-bottom: 1px #FFFFFF solid;
}

#gnav ul li a {
display: block;
width: 150px;
height: 24px;
color: #000000;
font-size: 100%;
line-height: 1.6;
background: #6495ed;
text-decoration: none;
}

/* ※．子メニュー以下にマウスがあるときも親メニューの色は変わったにしたい */
#gnav ul li:hover > a {
background: #ffa500;
}

/* 全角ひらがな階層 */
#gnav ul li ul {
display: none;
list-style-type: none;
}

#gnav ul li:hover ul {
display: block;
position: relative;
top: -25px;
left: 152px;
width: 150px;
height: 25px;
}

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

最新から表示
回答順に表示

No.4

回答者： ORUKA1951
回答日時：2014/10/03 15:30

＞こんなシンプルにcssを定義するだけだなんてビックリ＼(◎o◎)／！です。

ははは・・・
あたこちサイトめぐって、訳も判らずつまみ食いしてもできません。
要点は　たったこれだけ

ul{list-style:none;}/* ブロックにして */
ul,li{margin:0;padding:0;width:9em;}/* margin,paddinを消して幅を指定 */
ul li{position:relative;}/* 子孫の位置やサイズの基準になる */
ul li ul{
position:absolute;/* 親要素liの位置を基準に */
left:9em;/* 位置を指定 */
top:0;
}
/* 2階層目*/
ul li ul{display:none;}
ul li:hover ul{display:block;}
/* 3階層目*/
ul li:hover ul li ul{display:none;}
ul li:hover ul li:hover ul{display:block;}
/* 4階層目 */
ul li:hover ul li:hover ul li ul{display:none;}
ul li:hover ul li:hover ul li:hover ul{display:block;}
/* 5階層目 */
ul li:hover ul li:hover ul li:hover ul li ul{display:none;}
ul li:hover ul li:hover ul li:hover ul li:hover ul{display:block;}

とっつき難いですが、とにかく仕様書には目を通しておきましょう。
そうしないと、こんな簡単なことで躓いてしまう。

じゃ横に並べたリストの下に子供メニューを広げる。その項目の右に孫メニューはどうする。
これより、ずっと複雑になります。

- 0
- 件

通報する

No.3

回答者： ORUKA1951
回答日時：2014/10/03 09:45

リセットされる位置がまずい。

カウンター部分書き換え

div.header div.nav{
counter-reset: part chapter section subsection subsubsection;
}
div.header div.nav>ul>li{
counter-increment: part 1;
counter-reset: chapter section subsection subsubsection;
}
div.header div.nav>ul>li>a:after{
content: "("counter(part)")";
}
div.header div.nav>ul>li>ul>li{
counter-increment: chapter 1;
}
div.header div.nav>ul>li>ul>li>a:after{
content: "("counter(part)")-"counter(chapter);
}
div.header div.nav>ul>li>ul>li>ul>li{
counter-increment: section 1;
counter-reset:subsection;
}
div.header div.nav>ul>li>ul>li>ul>li>a:after{
content: "("counter(part)")-"counter(chapter)"-"counter(section);
}

div.header div.nav>ul>li>ul>li>ul>li>ul>li{
counter-increment: subsection 1;
counter-reset:subsubsection;
}
div.header div.nav>ul>li>ul>li>ul>li>ul>li>a:after{
content: "("counter(part)")-"counter(chapter)"-"counter(section)"-"counter(subsection);
}
div.header div.nav>ul>li>ul>li>ul>li>ul>li>ul>li{
counter-increment: subsubsection 1;
}
div.header div.nav>ul>li>ul>li>ul>li>ul>li>ul>li>a:after{
content: "("counter(part)")-"counter(chapter)"-"counter(section)"-"counter(subsection)"-"counter(subsubsection);
}

- 0
- 件

通報する

この回答へのお礼

ORUKA1951さん
分りやすい回答ありがとうございました。
こんなシンプルにcssを定義するだけだなんてビックリ＼(◎o◎)／！です。
いろんなサイトで調べましたが、どんどん頭がパニックになっていました。
本当にありがとうございましたm(__)m

通報する

お礼日時：2014/10/03 10:19

No.2

回答者： ORUKA1951
回答日時：2014/10/03 08:37

いきなり、5階層ものメニューに取り組んでもうまく行きません。

まず、二階層、三階層と作成していかないと身にはつきません。
＞色々サイトで探しましたが見つからず。。。
　他の勉強(特に理系科目)と同じ、回答例をたとえ見つけたとしても応用することは不可能でしょう。
　仕様書をきちんと読んで身につけるほうが見につきますから、応用もできます。

1) HTMLは文書構造しか書かれていませんから、変更も自在にできる。
　『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加する( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』ためのものです。
　ここでは、HTML5の新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/h … )名とその用途に従っています。(将来HTML5に直しやすい)

2) 下の階層のulはstaticでない親liに対して絶対配置

3) せっかくのカスケーディングスタイルシート、カスケーディングを活用する。
　　すなわち詳細度の知識は必須です。

4) :hoverで展開する場合、展開される項目は印刷できませんから、media制限をかけておく
　印刷時には展開されて印刷される。

★タブは＿に置換してあるので戻す。

<style type="text/css" media="screen">

＿</style>

- 0
- 件

通報する

No.1

回答者： ORUKA1951
回答日時：2014/10/02 20:25

きちんと文書構造に従ってスタイル書けば良いです。

・absoluteはstaticでにい直近の抱合ブロックの位置に従う
　10.1 "包含ブロック"の定義( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
・詳細度をきちんと理解して・・
　6.4.3 セレクタの詳細度を計算する( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
　
★簡単なサンプルです。
★タブは＿に置換してあるので戻す。
★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# )
　でチェック済み( hrefの内容がない以外はＯＫ)
★ナンバーは書かない。目次が増えるたびに全部書き直さなきゃならない
　contentプロパティとcounterを使いましょう。

★連続投稿できないのでスタイルは明日にでも

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
＿<title>サンプル</title>
＿<meta name="author" content="ORUKA1951">
＿<meta http-equiv="Content-Style-Type" content="text/css">
＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
＿<link rel="START" href="../index.html">
＿<style type="text/css">

＿</style>
</head>
<body>
＿<div class="header">
＿＿<div class="nav">
＿＿＿<ul>
＿＿＿＿<li><a href="#">テスト</a>
＿＿＿＿＿<ul>
＿＿＿＿＿＿<li><a href="#">テスト</a>
＿＿＿＿＿＿＿<ul>
＿＿＿＿＿＿＿＿<li><a href="#">テスト</a>
＿＿＿＿＿＿＿＿＿<ul>
＿＿＿＿＿＿＿＿＿＿<li><a href="#">テスト</a>
＿＿＿＿＿＿＿＿＿＿＿<ul>
＿＿＿＿＿＿＿＿＿＿＿＿<li><a href="#">テスト</a></li>
＿＿＿＿＿＿＿＿＿＿＿＿<li><a href="#">テスト</a></li>
＿＿＿＿＿＿＿＿＿＿＿＿<li><a href="#">テスト</a></li>
＿＿＿＿＿＿＿＿＿＿＿＿<li><a href="#">テスト</a></li>
＿＿＿＿＿＿＿＿＿＿＿</ul>
＿＿＿＿＿＿＿＿＿＿</li>
＿＿＿＿＿＿＿＿＿＿<li><a href="#">テスト</a>
＿＿＿＿＿＿＿＿＿＿＿<ul>
＿＿＿＿＿＿＿＿＿＿＿＿<li><a href="#">テスト</a></li>
＿＿＿＿＿＿＿＿＿＿＿＿<li><a href="#">テスト</a></li>
＿＿＿＿＿＿＿＿＿＿＿＿<li><a href="#">テスト</a></li>
＿＿＿＿＿＿＿＿＿＿＿</ul>
＿＿＿＿＿＿＿＿＿＿</li>
＿＿＿＿＿＿＿＿＿</ul>
＿＿＿＿＿＿＿＿</li>
＿＿＿＿＿＿＿＿<li><a href="#">テスト</a>
＿＿＿＿＿＿＿＿＿<ul>
＿＿＿＿＿＿＿＿＿＿<li><a href="#">テスト</a>
＿＿＿＿＿＿＿＿＿＿＿<ul>
＿＿＿＿＿＿＿＿＿＿＿＿<li><a href="#">テスト</a></li>
＿＿＿＿＿＿＿＿＿＿＿＿<li><a href="#">テスト</a></li>
＿＿＿＿＿＿＿＿＿＿＿</ul>
＿＿＿＿＿＿＿＿＿＿</li>
＿＿＿＿＿＿＿＿＿＿<li><a href="#">テスト</a>
＿＿＿＿＿＿＿＿＿＿＿<ul>
＿＿＿＿＿＿＿＿＿＿＿＿<li><a href="#">テスト</a></li>
＿＿＿＿＿＿＿＿＿＿＿＿<li><a href="#">テスト</a></li>
＿＿＿＿＿＿＿＿＿＿＿＿<li><a href="#">テスト</a></li>
＿＿＿＿＿＿＿＿＿＿＿＿<li><a href="#">テスト</a></li>
＿＿＿＿＿＿＿＿＿＿＿</ul>
＿＿＿＿＿＿＿＿＿＿</li>
＿＿＿＿＿＿＿＿＿</ul>
＿＿＿＿＿＿＿＿</li>
＿＿＿＿＿＿＿</ul>
＿＿＿＿＿＿</li>
＿＿＿＿＿</ul>
＿＿＿＿</li>
＿＿＿＿<li><a href="#">テスト</a>
＿＿＿＿＿<ul>
＿＿＿＿＿＿<li><a href="#">テスト</a>
＿＿＿＿＿＿＿<ul>
＿＿＿＿＿＿＿＿<li><a href="#">テスト</a>
＿＿＿＿＿＿＿＿＿<ul>
＿＿＿＿＿＿＿＿＿＿<li><a href="#">テスト</a>
＿＿＿＿＿＿＿＿＿＿＿<ul>
＿＿＿＿＿＿＿＿＿＿＿＿<li><a href="#">テスト</a></li>
＿＿＿＿＿＿＿＿＿＿＿＿<li><a href="#">テスト</a></li>
＿＿＿＿＿＿＿＿＿＿＿</ul>
＿＿＿＿＿＿＿＿＿＿</li>
＿＿＿＿＿＿＿＿＿＿<li><a href="#">テスト</a>
＿＿＿＿＿＿＿＿＿＿＿<ul>
＿＿＿＿＿＿＿＿＿＿＿＿<li><a href="#">テスト</a></li>
＿＿＿＿＿＿＿＿＿＿＿＿<li><a href="#">テスト</a></li>
＿＿＿＿＿＿＿＿＿＿＿＿<li><a href="#">テスト</a></li>
＿＿＿＿＿＿＿＿＿＿＿＿<li><a href="#">テスト</a></li>
＿＿＿＿＿＿＿＿＿＿＿＿<li><a href="#">テスト</a></li>
＿＿＿＿＿＿＿＿＿＿＿</ul>
＿＿＿＿＿＿＿＿＿＿</li>
＿＿＿＿＿＿＿＿＿</ul>
＿＿＿＿＿＿＿＿</li>
＿＿＿＿＿＿＿</ul>
＿＿＿＿＿＿</li>
＿＿＿＿＿</ul>
＿＿＿＿</li>
＿＿＿＿<li><a href="#">テスト</a>
＿＿＿＿＿<ul>
＿＿＿＿＿＿<li><a href="#">テスト</a>
＿＿＿＿＿＿＿<ul>
＿＿＿＿＿＿＿＿<li><a href="#">テスト</a>
＿＿＿＿＿＿＿＿＿<ul>
＿＿＿＿＿＿＿＿＿＿<li><a href="#">テスト</a>
＿＿＿＿＿＿＿＿＿＿＿<ul>
＿＿＿＿＿＿＿＿＿＿＿＿<li><a href="#">テスト</a></li>
＿＿＿＿＿＿＿＿＿＿＿＿<li><a href="#">テスト</a></li>
＿＿＿＿＿＿＿＿＿＿＿＿<li><a href="#">テスト</a></li>
＿＿＿＿＿＿＿＿＿＿＿＿<li><a href="#">テスト</a></li>
＿＿＿＿＿＿＿＿＿＿＿＿<li><a href="#">テスト</a></li>
＿＿＿＿＿＿＿＿＿＿＿</ul>
＿＿＿＿＿＿＿＿＿＿</li>
＿＿＿＿＿＿＿＿＿＿<li><a href="#">テスト</a>
＿＿＿＿＿＿＿＿＿＿＿<ul>
＿＿＿＿＿＿＿＿＿＿＿＿<li><a href="#">テスト</a></li>
＿＿＿＿＿＿＿＿＿＿＿＿<li><a href="#">テスト</a></li>
＿＿＿＿＿＿＿＿＿＿＿＿<li><a href="#">テスト</a></li>
＿＿＿＿＿＿＿＿＿＿＿＿<li><a href="#">テスト</a></li>
＿＿＿＿＿＿＿＿＿＿＿＿<li><a href="#">テスト</a></li>
＿＿＿＿＿＿＿＿＿＿＿</ul>
＿＿＿＿＿＿＿＿＿＿</li>
＿＿＿＿＿＿＿＿＿</ul>
＿＿＿＿＿＿＿＿</li>
＿＿＿＿＿＿＿</ul>
＿＿＿＿＿＿</li>
＿＿＿＿＿＿<li><a href="#">テスト</a></li>
＿＿＿＿＿＿<li><a href="#">テスト</a></li>
＿＿＿＿＿</ul>
＿＿＿＿</li>
＿＿＿＿<li><a href="#">テスト</a></li>
＿＿＿</ul>
＿＿</div>
＿</div>
</body>
</html>