Произвольное меню как создать ?

Подскажите как можно такое меню сделать ? Вообще реально такое сделать , если да то подскажите как

  <div id="content_menu" class="opacity_none">
    <div class="container">
      <div class="row">
        <div class="col-lg-12">
          <ul class="d-flex justify-content-center">
            <li><a href="#"><img src="images/house-outline.png" alt=""><span>Главная</span></a></li>
            <li class="dropdown_menu">
              <div class="dropdown_a">
                <img src="images/money.png" alt="">
                <span>Букмекерские конторы</span>
              </div>
              <div class="container dropdown_content_menu">
                <div class="row">
                  <div class="col-lg-4">
                    <a class="d-flex align-items-center" href="#"><img src="images/min_League_legends.png"
                        alt=""><span>dvdryrhgdfh</span></a>
                    <a class="d-flex align-items-center" href="#"><img src="images/min_Counter_Strike.png"
                        alt=""><span>Strike Counter </span></a>
                    <a class="d-flex align-items-center" href="#"><img src="images/min_Dota.png" alt=""><span>Dota
                        2</span></a>
                  </div>
                  <div class="col-lg-4">
                    <a class="d-flex align-items-center" href="#"><img src="images/min_Overwatch.png"
                        alt=""><span>Overwatch</span></a>
                    <a class="d-flex align-items-center" href="#"><img src="images/min_Starcraft.png"
                        alt=""><span>Starcraft II</span></a>
                    <a class="d-flex align-items-center" href="#"><img src="images/min_Call_Duty.png" alt=""><span>Call
                        of Duty</span></a>
                  </div>
                  <div class="col-lg-4">
                    <a class="d-flex align-items-center" href="#"><img src="images/min_Heroes_storm.png"
                        alt=""><span>Heroes of the
                        storm</span></a>
                    <a class="d-flex align-items-center" href="#"><img src="images/min_Rainbow_Six.png"
                        alt=""><span>Rainbow Six</span></a>
                    <a class="d-flex align-items-center" href="#"><img src="images/min_King_Glory.png" alt=""><span>King
                        of Glory</span></a>
                  </div>
                </div>
              </div>
            </li>
            <li class="dropdown_menu">
              <div class="dropdown_a">
                <img src="images/sword.png" alt="">
                <span>все игры</span>
              </div>
              <div class="container dropdown_content_menu">
                <div class="row">
                  <div class="col-lg-4">
                    <a class="d-flex align-items-center" href="#"><img src="images/min_League_legends.png"
                        alt=""><span>League of
                        legends</span></a>
                    <a class="d-flex align-items-center" href="#"><img src="images/min_Counter_Strike.png"
                        alt=""><span>Counter Strike</span></a>
                    <a class="d-flex align-items-center" href="#"><img src="images/min_Dota.png" alt=""><span>Dota
                        2</span></a>
                  </div>
                  <div class="col-lg-4">
                    <a class="d-flex align-items-center" href="#"><img src="images/min_Overwatch.png"
                        alt=""><span>Overwatch</span></a>
                    <a class="d-flex align-items-center" href="#"><img src="images/min_Starcraft.png"
                        alt=""><span>Starcraft II</span></a>
                    <a class="d-flex align-items-center" href="#"><img src="images/min_Call_Duty.png" alt=""><span>Call
                        of Duty</span></a>
                  </div>
                  <div class="col-lg-4">
                    <a class="d-flex align-items-center" href="#"><img src="images/min_Heroes_storm.png"
                        alt=""><span>Heroes of the
                        storm</span></a>
                    <a class="d-flex align-items-center" href="#"><img src="images/min_Rainbow_Six.png"
                        alt=""><span>Rainbow Six</span></a>
                    <a class="d-flex align-items-center" href="#"><img src="images/min_King_Glory.png" alt=""><span>King
                        of Glory</span></a>
                  </div>
                </div>
              </div>
            </li>
            <li><a href="#"><img src="images/blog_ico.png" alt=""><span>блог</span></a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>