Custom sidebar menu

Here it is my code for the sidebar menu of this page :

<aside class="sidebar sidebar_left  three alpha units" role="complementary" itemscope="itemscope" itemtype="https://schema.org/WPSideBar"><div class="inner_sidebar extralight-border"><section id="nav_menu-3" class="widget clearfix widget_nav_menu"><div class="menu-menu-test-barre-laterale-container"><ul id="menu-menu-test-barre-laterale" class="menu"><li id="menu-item-2141" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-1057 current_page_item menu-item-has-children menu-item-2141"><a href="http://localhost/wordpress/agence-evenementielle-paris-et-ile-de-france/">Agence événementielle Paris et Ile de France</a>
<ul class="sub-menu">
	<li id="menu-item-2133" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2133"><a href="http://localhost/wordpress/cluedo-geant/">Animation Cluedo géant</a>
	<ul class="sub-menu">
		<li id="menu-item-2135" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2135"><a href="http://localhost/wordpress/petit-dejeuner-d-entreprise/">Petit déjeuner d’entreprise</a></li>
	</ul>
</li>
	<li id="menu-item-2136" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2136"><a href="http://localhost/wordpress/soiree-de-fin-annee-entreprise/">Soirée de fin d’année d’entreprise</a></li>
	<li id="menu-item-2137" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2137"><a href="http://localhost/wordpress/soiree-a-theme/">Soirée à thème</a></li>
	<li id="menu-item-2138" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2138"><a href="http://localhost/wordpress/garden-party/">Garden-party</a></li>
	<li id="menu-item-2139" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2139"><a href="http://localhost/wordpress/soiree-casino/">Soirée casino</a></li>
	<li id="menu-item-2140" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2140"><a href="http://localhost/wordpress/cocktail-dinatoire/">Cocktail dinatoire</a></li>
	<li id="menu-item-2142" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2142"><a href="http://localhost/wordpress/arbre-de-noel-ce/">Arbre de Noël CE</a></li>
</ul>
</li>
<li id="menu-item-2159" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2159"><a href="http://localhost/wordpress/mariage/">Organisation Mariage</a></li>
</ul></div><span class="seperator extralight-border"></span></section></div></aside>

Hi Ismael,
Thank you for your answer.
To have this customized menu (with category and I want to show), I use WordPress custom menu widget with a menu selected.
Unfortunatelly, as I work on local mode, I can’t give you an on-line accessible URL.
I’d like my menu looks like this : http://www.sphere-evenements.com/maquette-menu-gauche-enfold.jpg
With :
– Expandable menu
– Customized arrows which appears when we click on the category to expand the sub-menu
– Customized colour of the category when we are on the page
– Different colours and font to organize my menu into a hierarchy

Thanks for your help !
Best regards,
Franck

Hi !
Ok thank you, I understand.
So, could you help me to adjust CSS code of this static menu please ? http://www.sphere-evenements.com/menu-gauche-enfold-static.jpg
Thank you,
Best regards,
Franck

Hi Ismael,
Thank you for your help. As you see : http://www.sphere-evenements.com/menu-enfold-sidebar-arrow.jpg, I have problems with differents things :
– My categories are not aligned like this : http://www.sphere-evenements.com/menu-gauche-enfold-static.jpg.
– The first category have a grey background and is not in orange like this : http://www.sphere-evenements.com/menu-gauche-enfold-static.jpg
– The arrow is on the right of the text and not on the left
Thank you,
Franck