为什么我看不到来自我选择的链接的子菜单？答案

【问题标题】：Why can't I see the submenu from links that are left to the one I selected?为什么我看不到来自我选择的链接的子菜单？
【发布时间】：2016-02-12 20:08:39
【问题描述】：

我想这对你来说可能很容易 css 大师 :) 我正在尝试将一些 css 应用到我目前正在处理的我想要一个下拉菜单的页面。我从here 得到了代码，只是做了一些小的修改（外部 ul 的宽度、外部 ul 的类而不是 id 和 z-index 而不是巨大的负缩进）

我看到有一些误解，这里有一些关于这个菜单应该如何工作的更多细节：

有两层，一层在上面，一层在下面。
当前从顶部菜单中选择的链接会将 css 类“当前”附加到包含该链接的 li 元素。（我为此使用 MVC SiteMapProvider，但这对于这个问题应该无关紧要）
应默认显示与“当前”顶部菜单关联的子菜单，
但如果用户将鼠标悬停在指向另一个顶部菜单的链接上，它应该与另一个子菜单重叠。

（希望能澄清一点）

这是我正在使用的标记：

<ul class="mainMenu">
  <li>
    <a href="#">Link1</a>
    <ul>
      <li>
      <a href="#">Sub1</a>
      </li>
      <li>
      <a href="#">Sub1</a>
      </li>
      <li>
      <a href="#">Sub1</a>
      </li>
    </ul>
  </li>
  <li class="current">
    <a href="#">Link2</a>
    <ul>
      <li>
      <a href="#">Sub2</a>
      </li>
      <li>
      <a href="#">Sub2</a>
      </li>
      <li>
      <a href="#">Sub2</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">Link3</a>
    <ul>
      <li>
      <a href="#">Sub3</a>
      </li>
      <li>
      <a href="#">Sub3</a>
      </li>
      <li>
      <a href="#">Sub3</a>
      </li>
    </ul>
  </li>
</ul>

它使用这些样式：

* {
    margin:0;
    padding:0;
}
.mainMenu {
    list-style:none;
    height:3.8em;
    position:relative;
    line-height:1.4em;
}
.mainMenu li {
    width:136px;
    float:left;
    text-align:center;
}
.mainMenu a {
    height:1.5em;
    display:block;
    text-decoration:none;
    color:#000;
    background:#999;
}
.mainMenu li.current ul li.current a, .mainMenu li.current a div, .mainMenu a:active, .mainMenu a:focus, .mainMenu a:hover {
    background:#777;
}
/* --------- Sub Nav --------- */
.mainMenu li.current ul {
    left:0;
}
.mainMenu ul {
    position:absolute;
    left: 0;
    z-index: 1;

    width:408px;
    list-style:none;
    padding:.9em 0 0;
}
.mainMenu ul li {
    width:auto;
    margin:0 15px 0 0;
}
.mainMenu ul a {
    font-size:80%;
    height:auto;
    padding:0 8px;
}
.mainMenu li.current ul, .mainMenu li:hover ul { 
    z-index: 10;

    background:#fff;
}

另请参阅here 以获得已经包含两者的小提琴。一般来说，这似乎工作得很好，但是当我将鼠标悬停在右侧（即 Link1）时，我无法从子菜单中看到相应的链接，尽管当我将鼠标悬停在右侧（即 Link3）时它可以工作。有人知道为什么会这样吗？

ps：我也不知道为什么当前节点没有应用样式

.mainMenu li.current ul

（至少我在 firefox 17.0.1 中看不到它，不过，当不在小提琴本身时我没有这个问题，所以可能是一个小问题，而不是我的主要问题）

【问题讨论】：

标签： html css drop-down-menu menubar submenu

【解决方案1】：

只需添加一点 CSS ：

.mainMenu ul {
    display: none;
}

.mainMenu li:hover > ul {
    display: block;
}

Example

编辑

只需更改或删除.mainMenu li.current:hover ul 中的z-index。 Fiddle

【讨论】：

这看起来好一点，但是现在子菜单只在我悬停主链接时显示，我还希望默认显示当前选择的主链接的子菜单，并且应该重叠如果悬停另一个链接，则为另一个子菜单
嗯，差不多，但不是 :) 结果与我最初发布的完全一样，我无法将鼠标悬停在 Link1 上并查看其子菜单
啊我明白了！只是稍微修改了你的最后一个小提琴并将 .mainMenu li.current ul、.mainMenu li:hover ul 的规则拆分为两条规则，一条为当前的 z-index 1，另一条为 10，如果你愿意，可以编辑你的帖子，我会接受你的回答，因为你在这里帮助我最多；）
大声笑几乎同时 :) 编辑您的答案，我会接受，顺便谢谢 ;)

【解决方案2】：

您已将class="active" 设置为第二个子菜单，因此第一个菜单位于（由于z-index 设置）第二个菜单下。将活动类添加到第一个菜单

<ul class="mainMenu">
          <li class="current">
            <a href="#">Link1</a>
</li>
</ul>

DEMO

【讨论】：

这没有解决，我明确地将当前类设置为第二个 li，因为我想知道当第二个链接被点击并且你将鼠标悬停在左边时它的行为

【解决方案3】：

您错过了当前课程的位置，即第二个菜单（LINK2）。将其删除并放置在第一个链接（LINK1），如下所示

<li class="current">
   <a href="#">Link1</a>.......
</li>
<li> <a href="#">Link2</a> </li>

【讨论】：