Simple menu as on aliexpress

index.html

<div id="bond1" class="uk-width-medium">

  
    <span  >
      <h3 class="uk-margin-remove">Aliexpress</h3>
      <small>Покупай с умом, живи радуйся :)</small>
      <span uk-icon="menu" class="uk-margin-small-left"></span>
  </span>                   


  <div class="uk-margin-remove" uk-drop="pos: bottom-left; boundary: #bond1; boundary-align: false;  duration: 0">

    <div id="bond2" class="uk-tile uk-tile-muted ">
      <ul class="uk-nav">

        <li><a>Одежда для женщин</a>
          <div class="uk-margin-remove" style="width:600px" uk-drop="pos: right-justify; boundary: #bond2; boundary-align: true; duration: 0">
            <div class="uk-tile uk-tile-muted uk-height-1-1 uk-grid-divider uk-child-width-1-3@s uk-grid-small" uk-grid>
              <ul class="uk-nav">
                <li><a href="">Верхняя</a></li>
                <li><a href="">Нижняя)</a></li>
                <li><a href="">Лёгкая</a></li>
                <li><a href="">Платьишко</a></li>
              </ul>
              <ul class="uk-nav">
                <li><a href="">Верхняя</a></li>
                <li><a href="">Нижняя)</a></li>
                <li><a href="">Лёгкая</a></li>
                <li><a href="">Платьишко</a></li>
              </ul>
              <ul class="uk-nav">
                <li><a href="">Верхняя</a></li>
                <li><a href="">Нижняя)</a></li>
                <li><a href="">Лёгкая</a></li>
                <li><a href="">Платьишко</a></li>
              </ul>
            </div>
          </div>
        </li>

        <li><a href="">Одежда для мужчин</a>
          <div class="uk-margin-remove" uk-drop="pos: right-justify; boundary: #bond2; boundary-align: true; duration: 0">
            <div class="uk-tile uk-tile-muted uk-height-1-1">
              <ul class="uk-nav">
                <li><a href="">Пальтишко</a></li>
                <li><a href="">Военная</a></li>
                <li><a href="">Бронники</a></li>
                <li><a href="">Бушлаты</a></li>
              </ul>
            </div>
          </div>
        </li>

        <li><a href="">Всё для детей</a>
          <div class="uk-margin-remove" uk-drop="pos: right-justify; boundary: #bond2; boundary-align: true; duration: 0">
            <div class="uk-tile uk-tile-muted uk-height-1-1">
              <ul class="uk-nav">
                <li><a href="">Наганы</a></li>
                <li><a href="">Самолётики</a></li>
                <li><a href="">Машинки</a></li>
                <li><a href="">Мечи</a></li>
              </ul>
            </div>
          </div>
        </li>

        <li><a href="">Телефоны и аксессуары</a>
          <div class="uk-margin-remove" uk-drop="pos: right-justify; boundary: #bond2; boundary-align: true; duration: 0">
            <div class="uk-tile uk-tile-muted uk-height-1-1">
              <ul class="uk-nav">
                <li><a href="">Самсунг</a></li>
                <li><a href="">Нокиа</a></li>
                <li><a href="">Саоми</a></li>
                <li><a href="">Ленова</a></li>
              </ul>
            </div>
          </div>
        </li>

        <li><a href="">Компьютеры и планшеты</a>
          <div class="uk-margin-remove" uk-drop="pos: right-justify; boundary: #bond2; boundary-align: true; duration: 0">
            <div class="uk-tile uk-tile-muted uk-height-1-1">
              <ul class="uk-nav">
                <li><a href="">Белые</a></li>
                <li><a href="">Серые</a></li>
                <li><a href="">Бывшие</a></li>
                <li><a href="">Большие</a></li>
              </ul>
            </div>
          </div>
        </li>

        <li><a href="">Автотовары</a>
          <div class="uk-margin-remove" uk-drop="pos: right-justify; boundary: #bond2; boundary-align: true; duration: 0">
            <div class="uk-tile uk-tile-muted uk-height-1-1">
              <ul class="uk-nav">
                <li><a href="">Колёса</a></li>
                <li><a href="">Кузова</a></li>
                <li><a href="">Крылья</a></li>
                <li><a href="">Диски</a></li>
              </ul>
            </div>
          </div>
        </li>

        <li><a href="">Бытовая техника</a>
          <div class="uk-margin-remove" uk-drop="pos: right-justify; boundary: #bond2; boundary-align: true; duration: 0">
            <div class="uk-tile uk-tile-muted uk-height-1-1">
              <ul class="uk-nav">
                <li><a href="">Муз.центры</a></li>
                <li><a href="">Телики</a></li>
                <li><a href="">Навесы</a></li>
                <li><a href="">Пылесосы</a></li>
              </ul>
            </div></div>
        </li>

        <li><a href="">Электроника</a>
          <div class="uk-margin-remove" uk-drop="pos: right-justify; boundary: #bond2; boundary-align: true; duration: 0">
            <div class="uk-tile uk-tile-muted uk-height-1-1">
              <ul class="uk-nav">
                <li><a href="">Плееры</a></li>
                <li><a href="">Мясорубки</a></li>
                <li><a href="">Комбайны</a></li>
                <li><a href="">Стиралки</a></li>
              </ul>
            </div>
          </div>
        </li>

      </ul>
    </div>
  </div>

</div>

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.20/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.20/js/uikit-icons.min.js"></script>

simple-menu-as-on-aliexpress.markdown

Simple menu as on aliexpress

Простое меню как на али)

A Pen by Beibit Sakhanov on CodePen.

License.

style.css

body{margin:10%}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.20/css/uikit.min.css" rel="stylesheet" />