Line 278: | Line 278: | ||
display: block; | display: block; | ||
} | } | ||
+ | |||
+ | #contents { | ||
+ | overflow: hidden; | ||
+ | width: 750px; | ||
+ | height: 300px; | ||
+ | margin: 0 auto; | ||
+ | padding: 0; | ||
+ | box-sizing: border-box; | ||
+ | display: flex; | ||
+ | } | ||
+ | #nav { | ||
+ | width: 150px; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | } | ||
+ | #nav li { | ||
+ | position: relative; | ||
+ | width: 150px; | ||
+ | height: 40px; | ||
+ | } | ||
+ | #nav > li { | ||
+ | border-bottom: none; | ||
+ | } | ||
+ | #nav li:last-child { | ||
+ | border-bottom: none; | ||
+ | } | ||
+ | #nav li:hover > ul > li { | ||
+ | border-bottom: none; | ||
+ | } | ||
+ | #nav li > ul > li:last-child { | ||
+ | border-bottom: none; | ||
+ | } | ||
+ | #nav li a { | ||
+ | display: block; | ||
+ | width: 150px; | ||
+ | height: 40px; | ||
+ | color: #fff; | ||
+ | font-size: 14px; | ||
+ | line-height: 2.8; | ||
+ | padding: 0 5px; | ||
+ | background: #9fb7d4; | ||
+ | border-bottom: 1px solid #fff; | ||
+ | box-sizing: border-box; | ||
+ | text-decoration: none; | ||
+ | transition: 0.5s; | ||
+ | } | ||
+ | #nav li a:hover { | ||
+ | color: #fff; | ||
+ | background: #afc6e2; | ||
+ | } | ||
+ | #nav > li:hover > a { | ||
+ | background: #afc6e2; | ||
+ | transition: 0.5s; | ||
+ | } | ||
+ | #nav > li:hover li:hover > a { | ||
+ | background: #afc6e2; | ||
+ | } | ||
+ | #nav li:hover > ul > li {/*子・孫*/ | ||
+ | overflow: visible; | ||
+ | top: -40px; | ||
+ | left: 110px; | ||
+ | height: 40px; | ||
+ | } | ||
+ | #nav li ul li {/*子・孫*/ | ||
+ | overflow: hidden; | ||
+ | height: 0; | ||
+ | left: 110px; | ||
+ | list-style: none; | ||
+ | transition: 0.2s; | ||
+ | } | ||
+ | #nav li ul li a { | ||
+ | background: #9fb7d4; | ||
+ | transition: 0.5s; | ||
+ | } | ||
+ | #nav li ul:before {/*孫*/ | ||
+ | position: absolute; | ||
+ | content: ""; | ||
+ | top: 14px; | ||
+ | left: 140px; | ||
+ | border: 5px solid transparent; | ||
+ | border-left: 5px solid #fff; | ||
+ | } | ||
+ | #nav li:hover ul li ul li:hover > a {/*孫*/ | ||
+ | background: #afc6e2; | ||
+ | } | ||
Revision as of 00:32, 30 October 2017