前提・実現したいこと
ここに質問の内容を詳しく書いてください。
htmlでサイドメニューを作っています。
メニュー項目をタップすると具体的に分岐するドロップダウンメニュー実装中にドロップダウンメニューが表示されません。
Strategyというメニュー項目を押したら、b1というメニュー項目を表示したいのですが、表示されません。
該当のソースコード
html
1header><link rel="stylesheet" type="text/css" href="ham-01.css"> 2 <div id="nav-drawer"> 3 <input id="nav-input" type="checkbox" class="nav-unshown"> 4 <label id="nav-open" for="nav-input"><span></span></label> 5 <label class="nav-unshown" id="nav-close" for="nav-input"></label> 6 <div id="nav-content" clss="nav"> 7 <a href="ev_index.html">test-1</a> 8 <a href="ev_exp.html">test-1</a> 9 <a href="#">test-3</a> 10 <a href="">test-3</a> 11 <a href="ev_school.html">test-4</a> 12 <a href="ev_access.html">test-5</a> 13 <a href="#">test-5</a><br> 14 <a href="#" target="top">test-6</a> 15 <a href="#"><font color="#00BFFF">test-7</font></a> 16<li><a href="#">Strategy</a> 17<ul> 18<li><a href="#">b1</a></li> 19<li><a href="#">b1</a> 20 </div> 21 </header>
css
1 header { 2 padding:10px; 3 } 4 #nav-content a { 5 display: block; 6 text-align: center; 7 width: 80%; 8 max-width: 300px; 9 margin: 1rem auto; 10 padding: 0.5rem 0; 11 background: #777; 12 color: #fff; 13 font-famile: sans-serif; 14 text-decoration: none 15 } 16 #nav-drawer { 17 position: fixed;top: 0:left:0; 18 } 19 20 /*チェックボックス等は非表示に*/ 21 .nav-unshown { 22 display:none; 23 } 24 25 /*アイコンのスペース*/ 26 #nav-open { 27 display: inline-block; 28 width: 30px; 29 height: 22px; 30 vertical-align: middle; 31 } 32 33 /*ハンバーガーアイコンをCSSだけで表現*/ 34 #nav-open span, #nav-open span:before, #nav-open span:after { 35 position: absolute; 36 height: 3px;/*線の太さ*/ 37 width: 25px;/*長さ*/ 38 border-radius: 3px; 39 background: #555; 40 display: block; 41 content: ''; 42 cursor: pointer; 43 } 44 #nav-open span:before { 45 bottom: -8px; 46 } 47 #nav-open span:after { 48 bottom: -16px; 49 } 50 51 /*閉じる用の薄黒カバー*/ 52 #nav-close { 53 display: none;/*はじめは隠しておく*/ 54 position: fixed; 55 z-index: 99; 56 top: 0;/*全体に広がるように*/ 57 left: 0; 58 width: 100%; 59 height: 100%; 60 background: black; 61 opacity: 0; 62 transition: .3s ease-in-out; 63 } 64 65 /*中身*/ 66 #nav-content { 67 overflow: auto; 68 position: fixed; 69 top: 0; 70 left: 0; 71 z-index: 9999;/*最前面に*/ 72 width: 90%;/*右側に隙間を作る(閉じるカバーを表示)*/ 73 max-width: 330px;/*最大幅(調整してください)*/ 74 height: 100%; 75 background: #333;/*背景色*/ 76 transition: .3s ease-in-out;/*滑らかに表示*/ 77 -webkit-transform: translateX(-105%); 78 transform: translateX(-105%);/*左に隠しておく*/ 79 } 80 81 /*チェックが入ったらもろもろ表示*/ 82 #nav-input:checked ~ #nav-close { 83 display: block;/*カバーを表示*/ 84 opacity: .5; 85 } 86 87 #nav-input:checked ~ #nav-content { 88 -webkit-transform: translateX(0%); 89 transform: translateX(0%);/*中身を表示(右へスライド)*/ 90 box-shadow: 6px 0 25px rgba(0,0,0,.15); 91 } 92 93 94 } 95 .site-header{ 96 background: #fff; 97 display: flex; 98 padding: 60px 20px; 99 position: fixed; 100 justify-content: space-between; 101 width: 100%; 102 } 103 .site-logo img{ 104 height: 20px; 105 width: auto; 106 } 107 .gnav__menu{ 108 display: flex; 109 } 110 .gnav__menu__item{ 111 margin-left: 20px; 112 } 113 .gnav__menu__item a{ 114 color: #333; 115 text-decoration: none; 116 } 117 .hero{ 118 max-height: 500px; 119 overflow: hidden; 120 } 121 .hero img{ 122 height: auto; 123 width: 100%; 124 } 125 .content{ 126 line-height: 1.6; 127 margin: 0 auto; 128 padding-top: 100px; 129 width: 800px; 130 } 131 .content p{ 132 margin-bottom: 40px; 133 } 134 .site-footer{ 135 background: #333; 136 padding: 80px 0; 137 } 138 .copyright{ 139 color: #fff; 140 font-size: 12px; 141 text-align: center; 142 } 143 /* 試した事*/ 144.nav { 145width: 750px; 146height: 40px; 147margin: 0 auto; 148padding: 0; 149display: flex; 150} 151.nav li {
試したこと
cssの試した事というコメントから最後まで試しました。
https://jsfiddle.net/fmpyv4g3/ 問題が再現しません。何をした時にどこが表示されないか、具体的に追記してください。
JavaScript、jQuery をタグに入れられてますが、今回はCSSだけで実装しようとしているということでしょうか?
kei334 さん m.ts10806
訂正しました。
とりあえず
<link rel="stylesheet" type="text/css" href="ham-01.css">
を
<head></head>の中に入れてみては?(headerではないので注意)
headerに入れてしまってはダメなのでしょうか?
提示されたコードは文法がおかしいのですので、実際のコードを提示されたほうがよいです。提示されたとおりのコードの場合、どういう構造にしたいのかがわかりません。
回答1件
あなたの回答
tips
プレビュー