Kentico CSS List Menu styling

Question

I am to implement this structure with kentico

       <li class="megamenu_button"><a href="#_">Mega Menu</a></li>

        <li><a href="#">Home</a></li>

        <li class="aa"><a href="#_" class="megamenu_drop">About Us</a><!-- Begin Item -->
            <div class="dropdown_4columns dropdown_container"><!-- Begin Item Container -->
                <div class="col_12">
                    <img class="img_left" src="images/about_us_img.png" width="125" height="146">
                    <ul class="list_unstyled">
                        <li><a href="#_">FreelanceSwitch</a></li>
                        <li><a href="#_">Creattica</a></li>
                        <li><a href="#_">WorkAwesome</a></li>
                        <li><a href="#_">Mac Apps</a></li>
                  </ul> 
                </div>
            </div><!-- End Item Container -->
        </li><!-- End Item -->
</ul><!-- End Mega Menu -->

The design is meant to have at least 6 menu headers with sub-menu each. The challenge is I don't even know how to approach the design. I am currently using aspx master template. All suggestion is welcome. Attached to this is an image of the expected production. I have the that suit the listing above.

Answer 1

You will need to make use of nested repeaters (CMSBasic Repeaters). May you find below useful links on how to do it.

Option 1 Option 2