I am trying to design a vertical menu bar, (accordion style) but I have not much experience in HTML & CSS. I took reference from the http://www.w3schools.com/howto/howto_js_accordion.asp . But it is looking so unprofessional. Please see the image attached.

How can I make my menu bar look so professional? Like ::
1. how to change the text color of the list items ( <li> items ) and also increase the font size?
2. how to remove underline from the links?
3. the list item is slightly flowing outside in the left margin, how can I manage that?
code
Code:
<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>
                    <!-- cd-accordion-menu -->
CSS
Code:
button.accordion {
background-color: #0CA3D2;/*#eee;*/
color: white;
cursor: pointer;
padding: 10px;
/*border: none;*/
text-align: left;
outline: none;
font-size: 17px;
transition: 0.4s;
width:100%;
}

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

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

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

div.panel {
font-size: 15px;
font-weight: bold;

padding: 0 18px;
background-color: #0CA3D2;
max-height: 0;
overflow: hidden;
transition: 0.6s ease-in-out;

}

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

.submenu{
 list-style-type: none;
 padding: 0;
}
Please help me I am very new to UX Design. Thank You!