adding design to vertical menu bar

[nischalinn]

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

<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

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!
https://s24.postimg.org/4ujmm3rlh/Capture.png