HTML/CSSでアコーデオンメニューを作成しています。

Question

前提・実現したいこと

HTML/CSS(jQuery）でアコーデオンメニューを作成しています。

発生している問題

＋ボタンをクリックすると、回答文が表示されるが、枠の中で表示されるために、枠全体が広がってします。回答文を枠の外で表示したい。
また、list-style:none;で回答文の黒点を消しているが、回答文の全体を左寄せにしたい。

該当のソースコード

HTML

<div class="section19">
        
            <h2>よくある質問</h2>

<div class="menu_item">

    <a class="menu_item_link js-menu" href="">プログラミングスキルは必要ですか？</a>
     <ul class="submenu"> 
         <li class="submenu__item">
            いいえ、必要ありません。しかし、iSaraでは参加費以上の金額が稼げることを保障しています。 従って、事前通話面談時点で簡単なテストを実施し、場合によってはお断りをしております。この点だけはご了承ください</li>
        
    </ul> 

    

<script> $(function(){ $('.js-menu').each(function(){ $(this).on('click',function(){ $(this).toggleClass('on'); $("+.submenu",this).slideToggle(); return false; }); }); }); </script>

CSS

.section19 {

background-color:white;
height: 1331px;
padding: 65px 20%;
text-align: center;
font-size: 20px;
font-weight: 900;

}

.menu_item {
background: white;
border:solid;
color: gray;
cursor: pointer;
display: block;
margin-bottom: 1px;
}
.menu_item_link {
color:black;
display: block;
line-height: 60px;
padding: 0.2rem;
position: relative;
text-align: left;
border: 1px solid;
border-color: white;
}
.menu_item_link:after {
background: white;
content: '\f067';
display: block;
font-family: "Font Awesome 5 Free";
line-height: 60px;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: 60px;
}
.menu_item_link.on:after {
content: '\f068';
color:black;

}

.submenu {
background: #fff;
display: none;
text-align: left;
}
.submenu__item {

color: black;
padding: 0.1rem; 
font-size: 16px;
 list-style:none;  

}

補足情報（FW/ツールのバージョンなど）

エディター

Visual Studio Code

ここにより詳細な情報を記載してください。

アコーデオンメニューの参照URL

https://webdesignday.jp/inspiration/technique/css/5670/

模写サイト

https://isara.life/

Comments

[Lhankor_Mhy]

3-7. markdownを利用しましょう
https://teratail.com/help/question-tips#questionTips3-7

Answer 1

回答文を枠の外で表示したい。

.menu_item{
background: white;
border:solid;
color: gray;
cursor: pointer;
display: block;
margin-bottom: 1px;
}

↓

.menu_item a{
/*...*/
}

---

回答文の全体を左寄せにしたい

.submenu{
  padding: 0;
}

Comments

[tohma]

助かりました。ありがとうございます。