django-cms: How to create custom menu like image? - django

Question

I'm new with django-cms and i want to add menu like image i post.
I have read the doc but i don't know how to create my custom menu.
I want to get something like this html code (Please add me explain):
some place in code i have .col-4, and another place i have .col-3 look image and code for more comprehension.
<ul class="menu">
<li class="toggle-menu">
<i class="fa icon_menu"></i>
</li>
<li class="first">
Accueil
</li>
<li>
Photographie
<div class="megamenu full">
<div class="row">
<div class="col-4">
<ul class="megamenu-list">
<li class="title">Présentation</li>
<li>A propos</li>
</ul>
</div>
<div class="col-4">
<ul class="megamenu-list">
<li class="title">Evènements</li>
<li>Mariage</li>
<li>Portrait</li>
</ul>
</div>
<div class="col-4">
<ul class="megamenu-list">
<li class="title">Entreprise et institutions</li>
<li>Portraits Corporate</li>
<li>Reportage entreprise</li>
</ul>
</div>
</div>
</div>
</li>
<li>
Production media
<div class="megamenu full">
<div class="row">
<div class="col-3">
<ul class="megamenu-list">
<li class="title">Présentation</li>
<li>A propos</li>
<li>Nos offres</li>
</ul>
</div>
<div class="col-3">
<ul class="megamenu-list">
<li class="title">Services</li>
<li>Montage</li>
<li>Drones</li>
</ul>
</div>
<div class="col-3">
<ul class="megamenu-list">
<li class="title">Vos évènements</li>
<li>Mariages</li>
<li>Reportage coorporate</li>
</ul>
</div>
<div class="col-3">
<ul class="megamenu-list">
<li class="title">Location</li>
<li>Cameras</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
but i dont know how, please help