- 締切済み
cssで作成する多階層リスト
こんにちは。 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）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞こんなシンプルに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;} とっつき難いですが、とにかく仕様書には目を通しておきましょう。 そうしないと、こんな簡単なことで躓いてしまう。 じゃ横に並べたリストの下に子供メニューを広げる。その項目の右に孫メニューはどうする。 これより、ずっと複雑になります。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
リセットされる位置がまずい。 カウンター部分書き換え 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); }
- ORUKA1951
- ベストアンサー率45% (5062/11036)
いきなり、5階層ものメニューに取り組んでもうまく行きません。 まず、二階層、三階層と作成していかないと身にはつきません。 ＞色々サイトで探しましたが見つからず。。。 他の勉強(特に理系科目)と同じ、回答例をたとえ見つけたとしても応用することは不可能でしょう。 仕様書をきちんと読んで身につけるほうが見につきますから、応用もできます。 1) HTMLは文書構造しか書かれていませんから、変更も自在にできる。 『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加する( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』ためのものです。 ここでは、HTML5の新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )名とその用途に従っています。(将来HTML5に直しやすい) 2) 下の階層のulはstaticでない親liに対して絶対配置 3) せっかくのカスケーディングスタイルシート、カスケーディングを活用する。 すなわち詳細度の知識は必須です。 4) :hoverで展開する場合、展開される項目は印刷できませんから、media制限をかけておく 印刷時には展開されて印刷される。 ★タブは＿に置換してあるので戻す。 <style type="text/css" media="screen"> <!-- /* 基本的なこと */ html,body{margin:0;padding:0;} h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;} p{text-indent:1em;} div.header,div.section,div.footer{width:90%;min-width:630px;max-width:900px;margin:0 auto;padding:5px;} div.header div.nav{margin:0 auto;width:45em} /* ここからメニュー展開・・たったこれだけ・・ */ div.header div.nav ul{list-style:none;line-height:2em;} div.header div.nav ul,div.header div.nav ul li{margin:0;padding:0;width:9em;} div.header div.nav ul li{text-align:center;position:relative;} div.header div.nav ul li ul{position:absolute;left:9em;top:0;display:none;} div.header div.nav ul li:hover ul{display:block;} div.header div.nav ul li:hover ul li ul{display:none;} div.header div.nav ul li:hover ul li:hover ul{display:block;} div.header div.nav ul li:hover ul li:hover ul li ul{display:none;} div.header div.nav ul li:hover ul li:hover ul li:hover ul{display:block;} div.header div.nav ul li:hover ul li:hover ul li:hover ul li ul{display:none;} div.header div.nav ul li:hover ul li:hover ul li:hover ul li:hover ul{display:block;} /* ここから選択済みメニュー着色 */ div.header div.nav ul li a{display:block;width:100%;height:100%;} div.header div.nav ul li a{background-color:aqua;} div.header div.nav ul li:hover a{background-color:orange;} div.header div.nav ul li:hover ul li a{background-color:aqua;} div.header div.nav ul li:hover ul li:hover a{background-color:orange;} div.header div.nav ul li:hover ul li:hover ul li a{background-color:aqua;} div.header div.nav ul li:hover ul li:hover ul li:hover a{background-color:orange;} div.header div.nav ul li:hover ul li:hover ul li:hover ul li a{background-color:aqua;} div.header div.nav ul li:hover ul li:hover ul li:hover ul li:hover a{background-color:orange;} div.header div.nav ul li:hover ul li:hover ul li:hover ul li:hover ul li a{background-color:aqua;} div.header div.nav ul li:hover ul li:hover ul li:hover ul li:hover ul li:hover a{background-color:orange;} /* ここからカウンター */ 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); } div.header div.nav ul li:hover:after{content:"→";position:absolute;top:0;right:0;z-index:10;} div.header div.nav ul ul ul ul ul li:hover:after{content:none;} --> ＿</style>
- ORUKA1951
- ベストアンサー率45% (5062/11036)
きちんと文書構造に従ってスタイル書けば良いです。 ・absoluteはstaticでにい直近の抱合ブロックの位置に従う 10.1 "包含ブロック"の定義( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/visudet.html#containing-block-details ) ・詳細度をきちんと理解して・・ 6.4.3 セレクタの詳細度を計算する( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cover.html ) ★簡単なサンプルです。 ★タブは＿に置換してあるので戻す。 ★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>
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_1_thumbnail_img_sm.png)
お礼
ORUKA1951さん 分りやすい回答ありがとうございました。 こんなシンプルにcssを定義するだけだなんてビックリ＼(◎o◎)／！です。 いろんなサイトで調べましたが、どんどん頭がパニックになっていました。 本当にありがとうございましたm(__)m