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="#">TEST(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="#">TEST(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 Pゴシック", "MS PGothic", "MS UI Gothic", "MS ゴシック", "MS 明朝";
}
#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;
}
補足
回答ありがとうございます。 ><ul><li>~</li></ul>の間にもう一組<ul><li>~</li></ul>が入れ子になっています・ よく分かりました。 疑問がとれました。嬉しいです。 もう一つ 質問してもいいですか? <br/>の件です。 私の本に The <b>bold</b> element and the <strong>strong</strong>element are the same.<br/> この<br/>はどんな文の時使うのですか?