<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ドロップダウンメニューの作成</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <header> <h1>ロゴ</h1> <nav id="g-nav"> <ul> <li><a href="#">MEN</a></li> <li><a href="women/index.html">WOMEN</a> <div class="drop-menu"> <div class="drop-box"> <a href="women/index.html#shoes"> <p class="drop-photo"><img src="img/nav-01.jpg" alt=""></p> <p>シューズ</p> </a> </div><!-- /.drop-box --> <div class="drop-box"> <a href="women/index.html#wear"> <p class="drop-photo"><img src="img/nav-02.jpg" alt=""></p> <p>ウェア</p> </a> </div><!-- /.drop-box --> <div class="drop-box"> <a href="women/index.html#sports"> <p class="drop-photo"><img src="img/nav-03.jpg" alt=""></p> <p>スポーツ</p> </a> </div><!-- /.drop-box --> <div class="drop-box"> <a href="women/index.html#brand"> <p class="drop-photo"><img src="img/nav-04.jpg" alt=""></p> <p>ブランド</p> </a> </div><!-- /.drop-box --> </div><!-- /.drop-menu --> </li> <li><a href="#">KIDS</a></li> <li><a href="#">CUSTOMIZE</a></li> <li><a href="#">SALE</a></li> </ul> </nav> <div class="sns"> <p><img src="img/instagram-brands.svg" alt=""></p> <p><img src="img/envelope-regular.svg" alt=""></p> </div> </header> </body> </html>
style.css
@charset "utf-8"; header{ height: 80px; background-color: #e6f5fb; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; position: relative; } h1{ width: 10%; text-align: center; } #g-nav>ul{ display: flex; } #g-nav li{ margin: 0 20px; } #g-nav>ul>li>a{ display: block; color: #222; line-height: 80px; padding: 0 10px; font-weight: bold; } #g-nav>ul>li>a:hover{ text-decoration: underline 3px; text-underline-offset: 3px; } .drop-menu{ position: absolute; left: 0; top: 80px; width: 100%; height: 400px; background-color: #d1d1d1; display: flex; justify-content: center; padding-top: 80px; opacity: 0; visibility: hidden; } #g-nav li:hover>.drop-menu{ opacity: 1; visibility: visible; transition: 0.5s; } .drop-box{ width: 18%; margin: 0 16px; } .drop-box>a{ color: #222; margin-top: 12px; font-size: 20px; } .drop-photo{ overflow: hidden; margin-bottom: 6px; } .drop-box img{ transition: 0.3s; } .drop-box>a:hover img{ transform: scale(1.1); } .sns{ display: flex; width: 10%; justify-content: space-between; } .sns>p{ width: 44px; }