個人練習用：サイトパーツ、動きのあるメニューバー
transitionプロパティはdisplayでの制御をサポートしていないため、子孫メニューの制御はoverflowで行っております。displayでの制御も可能ですが、その場合動きはなくなります。解説なしです。個人練習用に作りました。
関連タイピング
-
beforeとafter要素を使った装飾です。
プレイ回数274英語長文517打 -
簡単な解説付きでグラデーションをまとめ、個人練習用
プレイ回数439長文645打 -
解説付きでbox-shadowの基本をまとめています。
プレイ回数244長文315打 -
日本語訳なし、個人練習用に作った英語長文です
プレイ回数2575英語長文673打 -
日本語訳なしの英語長文です。個人練習用につくりました。
プレイ回数380英語長文717打 -
個人練習用の英語長文です。
プレイ回数448英語長文795打
問題文
(<!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; }
※誹謗中傷、公序良俗に反するコメント、個人情報の投稿、歌詞の投稿、出会い目的の投稿、無関係な宣伝行為は禁止です。削除対象となります。
※このゲームにコメントするにはログインが必要です。
※コメントは日本語で投稿してください。