Html 无序列表的宽度超出内容div的宽度

我想设计一个下拉垂直菜单栏一样的手风琴菜单。我引用了

我在设置列表的宽度时遇到问题，该列表从手风琴按钮的宽度中流出。请参阅所附图片

<div id="aside">
                    <button class="accordion">Registration</button>
                    <div class="panel">
                        <ul class="submenu">
                            <li><a href="OPDRegister.aspx">Register</a></li>
                            <li><a href="CustomerRegistration.aspx">Bottoms</a></li>
                            <li><a href="CustomerRegistration.aspx">Footwear</a></li>
                        </ul>
                    </div>

                    <button class="accordion">Txn Configuration</button>
                    <div class="panel">
                        <ul class="submenu">
                            <li><a href="OPDRegister.aspx">Configuration</a></li>
                            <li><a href="CustomerRegistration.aspx">Settings</a></li>
                            <li><a href="CustomerRegistration.aspx">General</a></li>
                        </ul>
                    </div>

                    <button class="accordion">Reports</button>
                    <div id="foo" class="panel">
                        <ul class="submenu">
                            <li><a href="OPDRegister.aspx">End Day</a></li>
                            <li><a href="CustomerRegistration.aspx">Summary</a></li>
                            <li><a href="CustomerRegistration.aspx">User Wise</a></li>
                        </ul>
                    </div>

                </div>

如何将无序列表的宽度设置为与手风琴的宽度相同，并使无序列表的内容左对齐，与手风琴的内容左对齐？

---

按钮。accordion的宽度为97%，将其更改为100%
如何使ul的内容左对齐，我的意思是与accrodion按钮的内容在同一垂直线上？请帮助。@user4221591在
.panel上的填充与
.accordion
相同，并删除浏览器应用于
的默认填充。您需要从
.submenu
元素和
div.panel
子菜单{padding:0}
和
div.panel{padding:0}中删除填充
这将为您提供零填充。。现在根据您的需要增加价值现在我看到您的按钮上有填充物。。因此，要匹配它，您可以执行
div.panel{padding:10px}
#aside {
            float: left;
            width: 215px;
            margin-right: 0;
        }

    button.accordion {
        background-color: #eee;
        color: #444;
        cursor: pointer;
        padding: 10px;
        border: none;
        text-align: left;
        outline: none;
        font-size: 15px;
        transition: 0.4s;
        width:97%;
    }

    button.accordion.active, button.accordion:hover {
        background-color: #ddd;
    }

    button.accordion:after {
        content: '\002B';
        color: #777;
        font-weight: bold;
        float: right;
        margin-left: 5px;
    }

    button.accordion.active:after {
        content: "\2212";
    }

    div.panel {
        padding: 0 18px;
        background-color: white;
        max-height: 0;
        overflow: hidden;
        transition: 0.6s ease-in-out;
        opacity: 0;
    }

    div.panel.show {
        opacity: 1;
        max-height: 500px;  
    }

    .submenu{
         list-style-type: none;
    }