Question

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

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

有两个级别，一个在顶部，另一个在下面。
顶部菜单中当前选定的链接将css-class“current”附加到包含该链接的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中没有看到它，但是，当不在小提琴本身时我没有那个问题，所以可能是一个小问题而不是我的主要问题）

Answer 1

只需添加一些CSS：

.mainMenu ul {
    display: none;
}

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

Example

修改

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

Answer 2

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

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

DEMO

Answer 3

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

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

为什么我不能从我选择的链接中看到子菜单？

3 个答案: