Question

我有这个（简体）导航：

.ctmenu {
    display: none;
    float: right;
}

li:hover > .ctmenu {
    display: inline-block;
}

<ul class="menu">
    <li>
        <span class="ctmenu">CT Menu</span>
        <a href="#">Main page</a>
        <ul class="menu sub">
            <li>
                <span class="ctmenu">CT Menu</span>
                <a href="#">Sub page</a>
            </li>
        </ul>
    </li>
</ul>

当我悬停一个li时，直接子.ctmenu应该可见。那行得通，但是我只希望鼠标当前处于显示.ctmenu的位置。当我将鼠标悬停在“子菜单”上时，“主页”的.ctmenu也将可见，因为我也正在将其悬停。

我只希望使用CSS修复程序，但是javascript / jQuery可以。

编辑：

我在第一个示例中犯了一个小错误，从答案中可以看出这很重要：

.ctmenu在结构中的a之前，并且带有float:right，所以我不能使用a + .ctmenu选择器。还有另一种方法吗？

Answer 1

尝试一下：

.ctmenu { display: none; }

li a:hover + .ctmenu, .ctmenu:hover  { display: inline-block; }

<ul class="menu">
  <li>
    <a href="#">Main page</a><span class="ctmenu">C Menu 1</span>
    <ul class="menu sub">
      <li>
        <a href="#">Sub page</a><span class="ctmenu">C Menu 2</span>
      </li>
    </ul>
  </li>
</ul>

Answer 2

尝试一下：

.ctmenu { display:none }
li a:hover+.ctmenu,
.ctmenu:hover {
  display: inline-block;
}

<ul class="menu">
  <li>
    <a href="#">Main page</a>
    <span class="ctmenu">Demo 1</span>
    <span class="ctmenu">Demo 2</span>
    <span class="ctmenu">Demo 3</span>
    <span class="ctmenu">Demo 4</span>
    <ul class="menu sub">
      <li>
        <a href="#">Sub page</a>
        <span class="ctmenu">Demo 1</span>
        <span class="ctmenu">Demo 2</span>
        <span class="ctmenu">Demo 3</span>
        <span class="ctmenu">Demo 4</span>
      </li>
    </ul>
  </li>
</ul>

Answer 3

如果HTML结构没有改变，则可以使用 JavaScript 来实现，因为CSS中没有没有父选择器。

使用mouseover，mouseout和classList，您可以执行以下操作：

var menu = document.querySelector(".menu");
var items = menu.querySelectorAll("li");

[].forEach.call(items, function(item) {
  item.addEventListener("mouseover", function(e) {
    e.stopPropagation();
    this.children[0].classList.add("active");
  });

  item.addEventListener("mouseout", function(e) {
    e.stopPropagation();
    this.children[0].classList.remove("active");
  });
})

.ctmenu {
  display: none;
  float: right;
}

.active {
  display: inline-block;
}

<ul class="menu">
  <li>
    <span class="ctmenu a">CT Menu</span>
    <a href="#">Main page</a>
    <ul class="menu sub">
      <li>
        <span class="ctmenu b">CT Menu</span>
        <a href="#">Sub page</a>
      </li>
    </ul>
  </li>
</ul>

Answer 4

您需要在LI标记后添加一个额外的div。请检查以下示例

.ctmenu {
        display: none;
        float: right;
    }

    .ct-div:hover > .ctmenu {
        display: inline-block;
    }

<ul class="menu">
    <li>
        <div class="ct-div">
            <span class="ctmenu">CT Menu</span>
            <a href="#">Main page</a>
        </div>
        <ul class="menu sub">
            <li>
                <div class="ct-div">
                    <span class="ctmenu">CT Menu</span>
                    <a href="#">Sub page</a>
                </div>
            </li>
        </ul>
    </li>
</ul>

悬停的嵌套无序列表

4 个答案: