时间戳

首页 > 解决方案 > 悬停时不显示 CSS 子菜单

css - 悬停时不显示 CSS 子菜单

问题描述

我正在为我的网站创建一个侧边栏菜单。我有一个悬停问题。

从第一个顶部菜单项（“Veggies”）开始悬停，然后按预期打开 Veggies 子菜单项。

然后，当我尝试从 Veggies 子菜单项（“Green Beans”）悬停到第二个顶部菜单项（“Fruits”）时，它不会悬停在 Fruits 上，因此不会打开 Fruits 子菜单项。

我包括了一个 jsfiddle：https ://jsfiddle.net/5v76d08q/4/

我相信我要么需要在某处设置位置或高度属性，但不知道在哪里设置它才能使其工作。

.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>

我希望当我从 Veggies 子菜单项 Green Bean 悬停到 Fruits 时，它应该悬停在 Fruits 上并打开 Fruits 子菜单项。

我更喜欢纯 CSS 解决方案。

谢谢！

标签： csstwitter-bootstraponhover

解决方案

推荐阅读