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

Question

我想设计一个像手风琴菜单一样的下拉垂直菜单栏。我参考了http://www.w3schools.com/howto/howto_js_accordion.asp

我遇到了设置从手风琴按钮的宽度流出的列表宽度的问题。请参阅附图。

<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>

的CSS

#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;
    }

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

Answer 1

button.accordion宽度为97％，将其更改为100％