Выпадающее меню при наведении на вышестоящее меню

Question

Есть код

<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="#">Главная</a></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>

В результате подменю

отображается сразу при загрузке, а не при наведении на вышестоящий пункт меню - Услуги. Как добиться отображение подменю при наведении на вышестоящий пункт меню?

Answer 1

В первом приближении так, но у вас, судя по классам, все это дело должен делать скрипт из коробки! Бутстрап (CSS+JS) подключен? И кнопка-бутерброд обычно ВНЕ списка, вомзожно у вас ошибка в верстке.

.left-menu ul ul {display:none}
.left-menu ul li:hover > ul{display:block}

<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="#">Главная</a></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>

БЛОГ НА HUSL

Выпадающее меню при наведении на вышестоящее меню

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