Q&A
横から失礼します。補足で100%/4っていうのは必ず25%になるのでcalcを使わなて良いかと。
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <link rel="stylesheet" href="../../monsterlifeserver/include/css/header.css"> 7 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 8 9</head> 10<body> 11 12 <header> 13 <div class="header-wrapper"> 14 15 <div class="title"> 16 <div class="logo"><a href="../../monsterlifeserver/index.html"><img src="../../monsterlifeserver/img/mls_title_logo.png" alt="" width="100%" height="100%" border="0" /></a></div> 17 18 <div class="hamburger"> 19 <span></span> 20 <span></span> 21 <span></span> 22 </div> 23 </div> 24 25 26 <nav> 27 <ul class="menus"> 28 <li class="menu"><a href="../../monsterlifeserver/index.html">ホーム</a></li> 29 <li class="menu"><a href="#">メニュー１</a> 30 <ul> 31 <li><a href="../../monsterlifeserver/top.html">トップページ</a> 32 <li><a href="../../monsterlifeserver/gamelist.html">ミニゲーム一覧</a></li> 33 <li><a href="../../monsterlifeserver/link.html">MLSのSNS情報</a></li> 34 </ul> 35 </li> 36 <li class="menu"><a href="#">メニュー２</a> 37 <ul> 38 <li><a href="../../monsterlifeserver/24hserver.html">２４Hサーバーについて</a></li> 39 <li><a href="../../monsterlifeserver/aboutmlsbot.html">MLSBOTについて</a></li> 40 <li><a href="../../monsterlifeserver/aboutmember.html">会員（スポンサー）制について</a></li> 41 </ul> 42 </li> 43 <li class="menu"><a href="#">メニュー３</a> 44 <ul> 45 <li><a href="../../monsterlifeserver/kihu.html">寄付について</a></li> 46 <li><a href="../../monsterlifeserver/staff.html">スタッフ募集</a></li> 47 <li><a href="../../monsterlifeserver/komaru.html">MLSが困っています</a></li> 48 </ul> 49 </li> 50 </ul> 51 </nav> 52 53 </div> 54 </header> 55 56 <script src="../../monsterlifeserver/include/js/header.js"></script> 57</body> 58</html>
css
1* { box-sizing: border-box; } 2 3ul, li { 4 padding: 0px; 5 margin: 0px; 6 list-style: none; 7} 8 9 10/* メニュー */ 11nav { 12 background-color: greenyellow; 13} 14 15.menus { 16 display: flex; 17} 18 19.menus li { 20 list-style: none; 21 width: calc(100% / 4); 22 background-color: greenyellow; 23} 24 25.menu a { /* 文字色 */ 26 display: block; 27 padding: 15px; 28 text-decoration: none; 29} 30 31.menu a:hover { 32 background: rgba(128, 128, 128, 0.2); /* グレーの薄さ0.2 文字色はそのまま */ 33} 34 35.menu ul { 36 position: absolute; 37 display: none; 38 background-color: greenyellow; /* hover時に表示される子要素の色 */ 39 z-index: 10; 40} 41 42.menus li:hover ul { 43 display: block; /* これがないと、hover時に表示されない */ 44}
js
1cript.js：ハンバーガーボタンを動かす 2// script.js：ハンバーガーボタンを動かす 3 4$(function() { 5 $('.hamburger').click(function(){ 6 $('.hamburger').toggleClass('active'); 7 }); 8}); 91 102 113 124 135 146 157 16// script.js：ハンバーガーボタンを動かす 17 18$(function() { 19 $('.hamburger').click(function(){ 20 $('.hamburger').toggleClass('active'); 21 }); 22});
文字は親メニューの真下にきれいにサブメニューを設置したいのですが、このようになる理由分かりますでしょうか？
回答2件
0
ベストアンサー
CSS
1.menus li.menu { 2 width: 25%; 3} 4.menus li { 5 list-style: none; 6 background-color: greenyellow; 7}
投稿2019/07/29 22:31
総合スコア10429
0
ここかなと思います。
CSS
1.menus li { 2 list-style: none; 3 width: calc(100% / 4); 4 background-color: greenyellow; 5}
この指定の仕方だと、.menus以下のすべてのliのwidthが25%になります。
投稿2019/07/29 21:59
総合スコア247
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。