

コーディング初心者です。レスポンシブ対応のドロップダウンメニューがうまく作れません。  
どこを直せば添付した画像の通りSP版PC版整ったかたちになるでしょうか？

[code]

    $(function(){
              // ハンバーガーメニュー
              $("#drawer_toggle").click(function(){
              $(this).toggleClass("open");
              $("#global_nav").toggleClass("sp_open");
              });
          });
[/code]

[code]

    header {
      height: 80px;
    }
    header h1 {
      top: 24px;
      left: 25px;
    }
    header .logo img {
      width: 250px;
    }
    header nav {
      display: inline-block;
      position: absolute;
      top: 22px;
      right: 0;
      width: auto;
      height: auto;
      margin-right: 15px;
      font-size: 1.4rem;
      opacity: 1;
    }
    header nav ul {
      position: relative;
      top: 0;
      left: 0;
      transform: unset;
      list-style: none;
    }
    header nav ul li {
      display: inline-block;
      height: 35px;
      border-radius: 2px;
      line-height: 35px;
      position: relative;
    }
    header nav ul li a {
      display: block;
      padding: 0 15px;
      color: #9c9b98;
      font-size: unset;
      text-decoration: none;
      transition: color .3s;
    }
    
    header nav ul li:hover {
      background-color: #b99566;
    }
    header nav ul li:hover a {
    color: #fff;
    }
    
    #drawer_toggle {
      display: none;
    }
    #key_visual {
      padding-top: 80px;
      margin-bottom: 30px;
    }
    main {
      padding-bottom: 50px;
    }
    main h2 {
      padding-left: 20px;
    }
    #information {
      margin-bottom: 50px;
    }
    #information ul {
      font-size: 1.2rem;
    }
    #information ul li time {
      display: inline-block;
      padding-right: 10px;
    }
    #information ul li p {
      display: inline-block;
      line-height: 1;
    }
    #information ul li p::before {
      margin-right: 10px;
      vertical-align: middle;
    }
    #gourmet .container {
    justify-content: space-between;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    padding: 10px 0;
    }
    #gourmet article {
      width: calc(50% - 5px);
      padding: 0;
    }
    
    
    @media (max-width: 1000px) {
      header {
        z-index: 100;
        position: fixed;
        width: 100%;
        height: 60px;
        background-color: #fff;
    }
    header h1 {
        position: absolute;
        top: 14px;
        left: 15px;
    }
    header .logo img {
        width: 200px;
    }
    header nav {
        box-sizing: border-box;
        position: fixed;
        top: 60px;
        width: 100%;
        height: calc(100% - 60px);
        background: #fff;
        opacity: 0.9;
        /* 3. スライドメニューの場合 */
        right: -100%;
        transition: right .5s;
        /* ここまで */
    }
    /* 3. スライドメニューの場合 */
    header nav.sp_open {
        right: 0;
    }
    /* ここまで */
    header nav ul {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    header nav ul li a {
        display: block;
        padding: 25px;
        border-radius: 5px;
        color: #666;
        font-size: 1.8rem;
        text-align: center;
        text-decoration: none;
    }
    
    
    
    #drawer_toggle {
        z-index: 200;
        box-sizing: border-box;
        position: absolute;
        top: 0;
        right: 0;
        display: inline-block;
        width: 60px;
        height: 60px;
    }
    #drawer_toggle span {
        position: absolute;
        top: 19px;
        left: 17px;
        display: inline-block;
        width: 30px;
        height: 3px;
        border-radius: 2px;
        background-color: #666;
        vertical-align: top;
    }
    #drawer_toggle span:nth-child(2) {
        margin-top: 10px;
    }
    #drawer_toggle span:last-child {
        margin-top: 20px;
    }
    #drawer_toggle.open span {
        top: 29px;
        left: 14px;
        width: 35px;
        margin: 0;
    }
    #drawer_toggle.open span:first-child {
        transform: rotate(45deg);
    }
    #drawer_toggle.open span:nth-child(2) {
        display: none;
    }
    #drawer_toggle.open span:last-child {
        transform: rotate(-45deg);
    }
    main {
        font-size: 1.6rem;
    }
    main h2 {
        box-sizing: border-box;
        width: 100%;
        padding-left: 15px;
        background-color: #b99566;
        color: #fff;
        font-weight: normal;
        line-height: 40px;
    }
    main h2 span {
        display: none;
    }
    #key_visual {
        width: 100%;
        max-width: 1500px;
        padding-top: 60px;
        margin: 0 auto;
    }
    #key_visual img {
        width: 100%;
        vertical-align: bottom;
    }
    #information ul {
        list-style: none;
        font-size: 1.4rem;
    }
    #information ul li {
        padding: 5px 10px;
    }
    #information ul li:nth-child(even) {
        background-color: #f5f3f0;
    }
    #information ul li time {
        display: block;
        margin: 5px 0;
        font-size: 1.2rem;
    }
    #information ul li p {
        line-height: 1.5;
    }
    #information ul li p::before {
        content: "▶︎";
        margin-right: 5px;
        font-size: 1.2rem;
        vertical-align: top;
    }
    .container {
        display: flex;
        flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
    }
    #gourmet .container {
        padding: 10px;
    }
    #gourmet h3 {
        margin-bottom: 7px;
    }
    #gourmet article {
        width: 100%;
        margin-bottom: 30px;
    }
    #gourmet article figure {
        margin-bottom: 10px;
    }
    #gourmet article figure img {
        width: 100%;
    }
    #gourmet article p {
        font-size: 1.4rem;
    }
    #gourmet article p::before {
        content: "-";
        padding: 0 10px;
    }
    #gourmet .box_ttl {
        padding: 5px 0 5px 10px;
        border-left: 4px solid #402805;
        margin-bottom: 10px;
    }
    #gourmet .area li {
        display: inline-block;
        padding: 5px 10px;
        border-radius: 4px;
        margin-right: 5px;
        background-color: #b99566;
        color: #FFF;
        font-size: 1rem;
        line-height: 1;
        text-align: center;
    }
    }
[/code]

[code]

    <nav id="global_nav">
                <ul>
                    <li><a href="home">ホーム</a></li>
                    <li><a href="company">会社情報</a></li>
                    <li><a href="service">事業案内</a>
              <ul class="dropdown">
                <li><a href="buying">買いたい</a></li>
                <li><a href="selling">売りたい</a></li>
                <li><a href="rent">借りたい</a></li>
                <li><a href="lend">貸したい</a></li>
              </ul>
            </li>
                    <li><a href="inquiry">お問い合わせ</a></li>
                </ul>
            </nav>
[/code]

[![PC完成予定](https://i.stack.imgur.com/uZjoj.jpg)](https://i.stack.imgur.com/uZjoj.jpg)[![SP完成予定](https://i.stack.imgur.com/1Jcxt.png)](https://i.stack.imgur.com/1Jcxt.png)[![現状](https://i.stack.imgur.com/7w9zq.jpg)](https://i.stack.imgur.com/7w9zq.jpg)


CC BY-SA 4.0
2023-08-20T06:12:06.397
95989
2023-08-20T06:12:06.397
59528
question
javascript html css
レスポンシブ対応のドロップダウンメニューがうまく作れません。