ドロップダウンメニューの実装

Question

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
htmlでサイドメニューを作っています。
メニュー項目をタップすると具体的に分岐するドロップダウンメニュー実装中にドロップダウンメニューが表示されません。

Strategyというメニュー項目を押したら、b1というメニュー項目を表示したいのですが、表示されません。

該当のソースコード

header><link rel="stylesheet" type="text/css" href="ham-01.css">
  		<div id="nav-drawer">
      		<input id="nav-input" type="checkbox" class="nav-unshown">
     		<label id="nav-open" for="nav-input"><span></span></label>
      		<label class="nav-unshown" id="nav-close" for="nav-input"></label>
      	<div id="nav-content" clss="nav">
      	        <a href="ev_index.html">test-1</a>
		<a href="ev_exp.html">test-1</a>
		<a href="#">test-3</a>
		<a href="">test-3</a>
		<a href="ev_school.html">test-4</a>
		<a href="ev_access.html">test-5</a>
		<a href="#">test-5</a><br>
		<a href="#" target="top">test-6</a>
		<a href="#"><font color="#00BFFF">test-7</font></a>
<li><a href="#">Strategy</a>
<ul>
<li><a href="#">b1</a></li>
<li><a href="#">b1</a>
 	 	</div>
	</header>

 header {
           padding:10px;
     }
     #nav-content a {
           display: block;
           text-align: center;
           width: 80%;
           max-width: 300px;
           margin: 1rem auto;
           padding: 0.5rem 0;
           background: #777;
           color: #fff;
           font-famile: sans-serif;
           text-decoration: none
     }
     #nav-drawer {
           position: fixed;top: 0:left:0;
     }

     /*チェックボックス等は非表示に*/
     .nav-unshown {
           display:none;
     }

     /*アイコンのスペース*/
     #nav-open {
           display: inline-block;
           width: 30px;
           height: 22px;
           vertical-align: middle;
     }

     /*ハンバーガーアイコンをCSSだけで表現*/
     #nav-open span, #nav-open span:before, #nav-open span:after {
           position: absolute;
           height: 3px;/*線の太さ*/
           width: 25px;/*長さ*/
           border-radius: 3px;
           background: #555;
           display: block;
           content: '';
           cursor: pointer;
     }
     #nav-open span:before {
           bottom: -8px;
     }
     #nav-open span:after {
           bottom: -16px;
     }

     /*閉じる用の薄黒カバー*/
     #nav-close {
       display: none;/*はじめは隠しておく*/
       position: fixed;
       z-index: 99;
       top: 0;/*全体に広がるように*/
       left: 0;
       width: 100%;
       height: 100%;
       background: black;
       opacity: 0;
       transition: .3s ease-in-out;
     }    

     /*中身*/
     #nav-content {
           overflow: auto;
       position: fixed;
       top: 0;
       left: 0;
       z-index: 9999;/*最前面に*/
      width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
       max-width: 330px;/*最大幅（調整してください）*/
       height: 100%;
       background: #333;/*背景色*/
       transition: .3s ease-in-out;/*滑らかに表示*/
       -webkit-transform: translateX(-105%);
       transform: translateX(-105%);/*左に隠しておく*/
     }

     /*チェックが入ったらもろもろ表示*/
     #nav-input:checked ~ #nav-close {
       display: block;/*カバーを表示*/
       opacity: .5;
     }

     #nav-input:checked ~ #nav-content {
         -webkit-transform: translateX(0%);
         transform: translateX(0%);/*中身を表示（右へスライド）*/
         box-shadow: 6px 0 25px rgba(0,0,0,.15);
     }

            
     }
     .site-header{
         background: #fff;
         display: flex;
         padding: 60px 20px;
         position: fixed;
         justify-content: space-between;
         width: 100%;
     }
     .site-logo img{
         height: 20px;
         width: auto;
     }
     .gnav__menu{
         display: flex;
     }
     .gnav__menu__item{
         margin-left: 20px;
     }
     .gnav__menu__item a{
         color: #333;
         text-decoration: none;
     }
     .hero{
         max-height: 500px;
         overflow: hidden;
     }
     .hero img{
         height: auto;
         width: 100%;
     }
     .content{
         line-height: 1.6;
         margin: 0 auto;
         padding-top: 100px;
         width: 800px;
     }
     .content p{
         margin-bottom: 40px;
     }
     .site-footer{
         background: #333;
         padding: 80px 0;
     }
     .copyright{
         color: #fff;
         font-size: 12px;
         text-align: center;
     }
  /* 試した事*/
.nav {
width: 750px;
height: 40px;
margin: 0 auto;
padding: 0;
display: flex;
}
.nav li {

試したこと

cssの試した事というコメントから最後まで試しました。

Comments

[kei344]

https://jsfiddle.net/fmpyv4g3/ 問題が再現しません。何をした時にどこが表示されないか、具体的に追記してください。

[m.ts10806]

JavaScript、jQuery をタグに入れられてますが、今回はCSSだけで実装しようとしているということでしょうか？

[退会済みユーザー]

kei334 さん m.ts10806
訂正しました。

[m.ts10806]

とりあえず
<link rel="stylesheet" type="text/css" href="ham-01.css">
を
<head></head>の中に入れてみては？（headerではないので注意）

[退会済みユーザー]

headerに入れてしまってはダメなのでしょうか？

[kei344]

提示されたコードは文法がおかしいのですので、実際のコードを提示されたほうがよいです。提示されたとおりのコードの場合、どういう構造にしたいのかがわかりません。

Answer 1

• htmlがきちんとかけてません
• 閉じてないhtmlがあります
• クラスと思われる綴りがおかしいです
• Strategyがチェックボックスを変更する仕組みになっていない

<style>
.nav-unshown{display:none}
.nav-unshown+ul{display:none}
.nav-unshown:checked+ul{display:block;}

</style>

<header>
  <div id="nav-drawer">
    <input id="nav-input" type="checkbox" class="nav-unshown">
    <label id="nav-open" for="nav-input"><span></span></label>
    <label class="nav-unshown" id="nav-close" for="nav-input"></label>
    <div id="nav-content" clas="nav">
      <a href="ev_index.html">test-1</a>
      <a href="ev_exp.html">test-1</a>
      <a href="#">test-3</a>
      <a href="">test-3</a>
      <a href="ev_school.html">test-4</a>
      <a href="ev_access.html">test-5</a>
      <a href="#">test-5</a><br>
      <a href="#" target="top">test-6</a>
      <a href="#"><font color="#00BFFF">test-7</font></a>
      <li><a href="#"><label for="b-menu">Strategy</label></a>
      <input id="b-menu" type="checkbox" class="nav-unshown">
      <ul>
        <li><a href="#">b1</a></li>
        <li><a href="#">b1</a>
      </ul>
    </div>
  </div>
</header>

Comments

[退会済みユーザー]

まずは、タグがちゃんと書かれているかを確認してみます。