スマホサイトで横並びのアコーディオンメニューが作れなくて困っています。

こんにちは。HTML・CSSを勉強中なのですが、調べても分からないことがあったので質問失礼します。はじめて質問するため質問の仕方など間違えていたら申し訳ございません。
お力添えいただけますと助かります。

前提

スマホサイトで大カテゴリが横並びで中・小カテゴリは縦並びのアコーディオメニューを作りたいのだが、大カテゴリの横並びができない。

実現したいこと

【大カテゴリ】【大カテゴリ】【大カテゴリ】
→中カテゴリ
→中カテゴリ...

ような形のアコーディオンメニューを作りたいです。

発生している問題・エラーメッセージ

該当のソースコード

【HTML】
<!--アコーディオンメニュー部分 start-->
    <nav class="accordion">
        <ul>
                <label for="menu1"><span class="main_menu"><ul>Aメニュー</ul></span></label>
                <input type="checkbox"  id="menu1" class="toggle" />
            <ul>
                <li><a href="#">A_01</a></li>
                <li><a href="#">A_02</a></li>
                <label for="menu1_1">A_03</label>
                <input type="checkbox" id="menu1_1" class="toggle" />
            <ul>
                <li><a href="#">A_03_01</a></li>
                <li><a href="#">A_03_02</a></li>
            </ul>
            </ul>
       </ul>
    </nav>
    <!--アコーディオンメニュー部分 end-->
<!--アコーディオンメニュー部分 start-->
    <nav class="accordion">
        <ul>
                <label for="menu2"><span class="main_menu"><ul>Bメニュー</ul></span></label>
                <input type="checkbox"  id="menu2" class="toggle" />
            <ul>
                <li><a href="#">B_01</a></li>
                <li><a href="#">B_02</a></li>
                <label for="menu2_1">B_03</label>
                <input type="checkbox" id="menu2_1" class="toggle" />
            <ul>
                <li><a href="#">B_03_01</a></li>
                <li><a href="#">B_03_02</a></li>
            </ul>
            </ul>
       </ul>
    </nav>
    <!--アコーディオンメニュー部分 end-->

---------------------------------	

【CSS】
.accordion ul {
	list-style: none;
	max-width:100%;
}
.main_menu ul {
	float: left;
	background:#ccc;
    border-right:1px solid #8c8c8c;
    text-align:center;
    font-size:14px;
    display:block;
    padding:7px 0;
    text-decoration:none;
    color:#fff;
}

label{
	cursor: pointer;
}
.toggle{
	display: none;
}
.toggle + ul{
	max-height: 0;
	overflow: hidden;
	transition: all 1s linear;
}
.toggle:checked + ul{
	max-height: 500px;
	transition: all 1s linear;
}

試したこと

Float:left;　や　display、max-width

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

Dreamweaver2021を使用しています。

行動規範の内容に同意します

回答1件

以下のようにするとどうですか？

css
1        .main_menu ul {
2            /* float: left; これを削除 */
3            background: #ccc;
4            border-right: 1px solid #8c8c8c;
5            text-align: center;
6            font-size: 14px;
7            display: block;
8            padding: 7px 0;
9            text-decoration: none;
10            color: #fff;
11        }
12
13        body {            /* body直下の場合。親要素があるなら親要素。 */
14            display: flex;
15        }