Боковое выпадающее меню

Question

mainsidemenu.html

<html>
<head>
<style type="text/css">
.sidemenuitem {
        height: 46px;
        width: 370px;
}

.wrapblock {
    height: 964px;
    width: 559px;
    padding-left: 186.33px;
    margin-top: -51px;
    
}

.multicolumnsubmenu {
    column-count: 2;
}
</style>
</head>
<body>
<div class="col-xs-12 col-sm-5 col-md-4 col-lg-3 padding0 menu menu-backdrop">
        <div class="panel panel-primary left-menu">
            <ul>
                <div class="mainmenu">
                <div class="panel-heading hidden-xs">
                    <span>
                    <span>
                    <button data-toggle="dropdown" data-target="#menu" class="hamburger animated fadeInLeft noclose is-open" type="button">
                        <span class="hamb-top"></span>
                        <span class="hamb-middle"></span>
                        <span class="hamb-bottom"></span>
                    </button>
                    </span>
                    <span><div class="label menu-label" id="myelement">КАТАЛОГ ТОВАРОВ</div></span>
                    </span> 
            
                </div>
                      <li><a href="#"><div class="sidemenuitem">Бытовая техника для кухни</div></a>
                      <div class="wrapblock">
                      <span>
                      <ul class="multicolumnsubmenu">
                            <ul><li><a href="#">Фильтры и кулеры для воды</a></li>
                                <br/>
                                <li><a href="#">Аквафильтры</a></li>
                                <li><a href="#">Картриджи для аквафильтров</a></li>
                                <li><a href="#">Кулеры для воды</a></li>
                                <li><a href="#">Помпы и аксессуары</a></li>
                            </ul>
                            
                            
                            <ul><li><a href="#">Фильтры и кулеры для воды</a></li>
                                <br/>
                                <li><a href="#">Аквафильтры</a></li>
                                <li><a href="#">Картриджи для аквафильтров</a></li>
                                <li><a href="#">Кулеры для воды</a></li>
                                <li><a href="#">Помпы и аксессуары</a></li>
                            </ul>
                      </ul>
                      </span>
                      </div>
                      </li>
                      <li><a href="#">Новости</a></li>
                      <li><a href="#">Прайс</a></li>
                      <li><a href="#">Услуги</a>
                        <ul>
                          <li><a href="#">Услуга 1</a></li>
                          <li><a href="#">Услуга 2</a></li>
                          <li><a href="#">Услуга 3</a>
                            <ul>
                              <li><a href="#">Услуга 1</a></li>
                              <li><a href="#">Услуга 2</a></li>
                              <li><a href="#">Услуга 3</a></li>
                              <li><a href="#">Услуга 4</a></li>
                              <li><a href="#">Услуга 5</a></li>
                            </ul>
                          </li>
                          <li><a href="#">Услуга 4</a></li>
                          <li><a href="#">Услуга 5</a></li>
                        </ul>
                      </li>
                      <li><a href="#">Контакты</a></li>
                </div>
            </ul>
            
            </div>

        </div>
</html>
</body>

Требуется, чтобы было так как на https://positronica.ru/. Подскажите какие изменения нужно внести в код, чтобы добиться цели (перебрал уже много вариантов, но никак не выходит). В частности не понятно почему

несмотря на то, что

.sidemenuitem {
        height: 46px;
        width: 370px;
}

Answer 1

Для этого лучше использовать Bootstrap

Answer 2

Собственно вот, то что вам нужно:

.menu {
  position: relative;
  width: 10em;
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li {
  padding: 0.5em 0 0.5em 0.3em;
  cursor: pointer;
}

ul.level1 {
  border: 1px solid thistle;
}

ul.level1>li {
  background-color: bisque;
  border-bottom: 1px solid thistle;
}

ul.level1>li:last-child {
  border-bottom: none;
}

ul.level2 {
  position: absolute;
  top: 0;
  left: 100%;
  min-width: 100%;
  background-color: beige;
  border: 1px solid thistle;
  visibility: hidden;
  column-count: 2;
  white-space: nowrap;
}

ul.level2>li {
  padding: 0.5em 0.3em 0.5em 0.3em;
}

ul.level1>li:hover ul.level2 {
  visibility: visible;
}

.menu a {
  color: #333;
}

.bold {
  font-weight: bold;
}

<nav class="menu">
  <ul class="level1">
    <li id="l1">
      <div>Главный раздел 1 +</div>
      <ul class="level2">
        <li>Наименование 1-1</li>
        <li>Наименование 1-2</li>
        <li>Наименование 1-3</li>
        <li>Наименование 1-4</li>
      </ul>
    </li>
    <li id="l2">
      <div>Главный раздел 2</div>
    </li>
    <li id="l3">
      <div>Главный раздел 3 +</div>
      <ul class="level2">
        <li class="bold">Подраздел 1</li>
        <li>Наименование 1-1</li>
        <li>Наименование 1-2</li>
        <li>Наименование 1-3</li>
        <li class="bold">Подраздел 2</li>
        <li>Наименование 2-1</li>
        <li>Наименование 2-2</li>
        <li>Наименование 2-3</li>
        <li class="bold">Подраздел 3</li>
        <li>Наименование 3-1</li>
        <li>Наименование 3-2</li>
        <li>Наименование 3-3</li>
        <li class="bold">Подраздел 4</li>
        <li>Наименование 4-1</li>
        <li>Наименование 4-2</li>
        <li>Наименование 4-3</li>
      </ul>
    </li>
    <li id="l2">
      <div>Главный раздел 4</div>
    </li>
    <li id="l2">
      <div>Главный раздел 5</div>
    </li>
    <li id="l2">
      <div>Главный раздел 6</div>
    </li>
  </ul>
</nav>

БЛОГ НА HUSL

Боковое выпадающее меню

Ответы (2 шт):