個人練習用：サイトパーツ、動きのあるメニューバー
transitionプロパティはdisplayでの制御をサポートしていないため、子孫メニューの制御はoverflowで行っております。displayでの制御も可能ですが、その場合動きはなくなります。解説なしです。個人練習用に作りました。
関連タイピング
-
自分練習用、英語長文
プレイ回数2093英語長文1127打 -
個人練習用で作りました。解説なしです。
プレイ回数1214英語長文1140打 -
解説なし、個人練習用につくりました。
プレイ回数665英語長文1054打 -
jQuery基本例文集です。解説なしです。
プレイ回数907英語長文1554打 -
html,cssカーソルを合わせると動く画像
プレイ回数561長文456打 -
個人練習用：並び変え、間隔の調整、縦方向の揃えなど基本のまとめ
プレイ回数309英語長文813打 -
個人練習用の英語長文です。
プレイ回数543英語長文795打 -
beforeとafter要素を使った装飾です。
プレイ回数291英語長文517打
問題文
(<!DOCTYPE html><html><head><meta charset="UTF-8">)
<!DOCTYPE html><html><head><meta charset="UTF-8">
(<title>The sample of menu bar</title><link rel="stylesheet" href="css/mn.css">)
<title>The sample of menu bar</title><link rel="stylesheet" href="css/mn.css">
(</head><body><ul class="nav">)
</head><body><ul class="nav">
(<li><a href="#">Home</a></li><li><a href="#">Strategy</a><ul>)
<li><a href="#">Home</a></li><li><a href="#">Strategy</a><ul>
(<li><a href="#">b1</a></li><li><a href="#">b1</a></li></ul></li>)
<li><a href="#">b1</a></li><li><a href="#">b1</a></li></ul></li>
(<li><a href="#">About</a><ul><li><a href="#">c1</a><ul>)
<li><a href="#">About</a><ul><li><a href="#">c1</a><ul>
(<li><a href="#">c2</a></li><li><a href="#">c2</a></li></ul></li>)
<li><a href="#">c2</a></li><li><a href="#">c2</a></li></ul></li>
(<li><a href="#">c1</a></li></ul></li><li><a href="#">Works</a>)
<li><a href="#">c1</a></li></ul></li><li><a href="#">Works</a>
(<ul><li><a href="#">d1</a></li><li><a href="#">d1</a><ul>)
<ul><li><a href="#">d1</a></li><li><a href="#">d1</a><ul>
(<li><a href="#">d2</a></li><li><a href="#">d2</a><ul class="left">)
<li><a href="#">d2</a></li><li><a href="#">d2</a><ul class="left">
(<li><a href="#">d3</a></li><li><a href="#">d3)
<li><a href="#">d3</a></li><li><a href="#">d3
(</a></li></ul></li></ul></li></ul></li>)
</a></li></ul></li></ul></li></ul></li>
(<li><a href="#">Contact</a><ul><li><a href="#">e1</a><ul class="left">)
<li><a href="#">Contact</a><ul><li><a href="#">e1</a><ul class="left">
(<li><a href="#">e2-1</a></li><li><a href="#">e2-1</a></li></ul></li>)
<li><a href="#">e2-1</a></li><li><a href="#">e2-1</a></li></ul></li>
(<li><a href="#">e1</a><ul class="left"><li><a href="#">e2-2</a></li>)
<li><a href="#">e1</a><ul class="left"><li><a href="#">e2-2</a></li>
(<li><a href="#">e2-2</a></li></ul></li></ul></li><!--nav--></ul>)
<li><a href="#">e2-2</a></li></ul></li></ul></li><!--nav--></ul>
(<div class="content"><p>Main content.</p></div></body></html>)
<div class="content"><p>Main content.</p></div></body></html>
(start css)
start css
(.nav { width: 750px; height: 40px; margin: 100px auto 0 auto;)
.nav { width: 750px; height: 40px; margin: 100px auto 0 auto;
(padding: 0;)
padding: 0;
(display: flex; })
display: flex; }
(.nav li { position: relative; list-style: none;)
.nav li { position: relative; list-style: none;
(bottom: 0;})
bottom: 0;}
(.nav li a { display: block; width: 150px; height: 40px;)
.nav li a { display: block; width: 150px; height: 40px;
(text-align: center; color: #fff; font-size: 14px;)
text-align: center; color: #fff; font-size: 14px;
(line-height: 2.8; background: #9fb7d4; transition: 0.5s;)
line-height: 2.8; background: #9fb7d4; transition: 0.5s;
(text-decoration: none; border-right: 1px solid #eee;)
text-decoration: none; border-right: 1px solid #eee;
(box-sizing: border-box; })
box-sizing: border-box; }
(.nav > li:hover > a {/*layer-1*/color: orange; background: #afc6e2; })
.nav > li:hover > a {/*layer-1*/color: orange; background: #afc6e2; }
(.nav > li li:hover > a {/*layer-2*/color: olive; background: #afc6e2; })
.nav > li li:hover > a {/*layer-2*/color: olive; background: #afc6e2; }
(.nav li ul {top: 40px; left: -40px; position: absolute; })
.nav li ul {top: 40px; left: -40px; position: absolute; }
(.nav li ul li { overflow: hidden; height: 0; transition: 0.5s; })
.nav li ul li { overflow: hidden; height: 0; transition: 0.5s; }
(.nav li ul li a { border-top: 1px solid #eee; })
.nav li ul li a { border-top: 1px solid #eee; }
(.nav li:hover > ul > li { overflow: visible; height: 40px; })
.nav li:hover > ul > li { overflow: visible; height: 40px; }
(.nav li ul li ul { top: 0; left: 110px; })
.nav li ul li ul { top: 0; left: 110px; }
(.nav li ul li ul:before {/*layer-2*/position: absolute;)
.nav li ul li ul:before {/*layer-2*/position: absolute;
(content: ""; top: 15px; left: 30px; border: 5px solid transparent;)
content: ""; top: 15px; left: 30px; border: 5px solid transparent;
(border-left: 5px solid #fff; })
border-left: 5px solid #fff; }
(.nav li ul li ul li:hover > a {/*layer-3*/color: pink; background: #afc6e2; })
.nav li ul li ul li:hover > a {/*layer-3*/color: pink; background: #afc6e2; }
(.nav li ul li ul.left { top: 0; left: -190px; })
.nav li ul li ul.left { top: 0; left: -190px; }
(.nav li ul li ul.left:before,/*layer-2-left*/)
.nav li ul li ul.left:before,/*layer-2-left*/
(.nav li ul li ul li ul.left:before {/*layer-3-left*/)
.nav li ul li ul li ul.left:before {/*layer-3-left*/
(position: absolute; content: ""; top: 15px; left: 190px;)
position: absolute; content: ""; top: 15px; left: 190px;
(border: 5px solid transparent; border-right: 5px solid #fff; })
border: 5px solid transparent; border-right: 5px solid #fff; }
(.nav li ul li ul.left li:hover > a {/*layer-2-left*/)
.nav li ul li ul.left li:hover > a {/*layer-2-left*/
(color: pink; background: #afc6e2; })
color: pink; background: #afc6e2; }
(.nav li ul li ul li ul.left li:hover > a {/*layer-3-left*/)
.nav li ul li ul li ul.left li:hover > a {/*layer-3-left*/
(color: purple; background: #afc6e2; })
color: purple; background: #afc6e2; }
(.content { width: 750px; height: 200px; margin: 0 auto;)
.content { width: 750px; height: 200px; margin: 0 auto;
(padding: 10px; text-align: left; box-sizing: border-box; })
padding: 10px; text-align: left; box-sizing: border-box; }