Подменю CSS не отображается для Onhover - PullRequest
Новая
       20

Подменю CSS не отображается для Onhover

0 голосов
/ 15 мая 2019

Я создаю боковое меню для своего сайта. У меня есть проблема с этим.

Наведение, начиная с первого элемента верхнего меню («Veggies»), которое затем открывает элементы подменю Veggies, как и ожидалось.

Затем, когда я пытаюсь перейти от пункта подменю Veggies («Зеленые бобы») ко второму элементу верхнего меню («Фрукты»), он не наводит курсор на Фрукты и поэтому не открывает элементы подменю Фрукты.

Я включил jsfiddle: https://jsfiddle.net/5v76d08q/4/

Полагаю, мне либо нужно где-то установить свойство position или height, но я не знаю, где его установить, чтобы оно работало. 

.list-group {
  display: inline-block;
}

.list-group-submenu {
  display: none;
 }

.list-group-submenu a.list-group-item {
  color: #141C35;
  background-color: #557c83;
}

.list-group-submenu:hover,
[id^=da]:hover + .list-group-submenu {
  display: block;
}

a.list-group-item:hover {
  text-decoration: none;
  color: #FFFFFF;
  background-color: #008080;
}
<div id="sidebar-wrapper" style="margin-top: 51px;">
  <div id="MainMenu">
    <div id="MainMenu1">
      <div class="list-group">
        <a id="da2" href="#demo1" class="list-group-item">
          <span >Veggies </span>
        </a>
        <div id="demo1" class="list-group-submenu" style="">
          <a href="#" class="list-group-item">
            <span >Broccoli</span>
          </a>
          <a href="#" class="list-group-item">
            <span >Spinach</span>
          </a>
          <a href="#" class="list-group-item">
            <span >Green Beans</span>
          </a>
        </div>
        <a id="da3" href="#demo2" class="list-group-item">
          <span >Fruits </span>
         </a>
        <div id="demo2" class="list-group-submenu">
          <a href="#" class="list-group-item">
          <span >Mango </span>
          </a>
          <a href="#" class="list-group-item">
          <span >Cherry </span>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

Я ожидаю, что при наведении курсора на пункт меню «Зеленая фасоль» на «Фрукты» из меню Вегги он должен парить над Фруктами, а также открывать элементы подменю «Фрукты».

Я бы предпочел чистое решение CSS.

Спасибо!

...