0

我想这对你来说可能很容易 css 大师 :) 我正在尝试将一些 css 应用到我目前正在处理的页面上，我想要一个下拉菜单。我从这里得到了代码，只是做了一些小的修改（外部 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;
}

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

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

.mainMenu li.current ul

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

4

3 回答 3

1

Just add a bit of CSS :

.mainMenu ul {
    display: none;
}

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

Example

EDIT

Just change or remove z-index in .mainMenu li.current:hover ul. Fiddle

于 2013-04-12T09:47:37.073 回答
0

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

<li class="current">
   <a href="#">Link1</a>.......
</li>
<li> <a href="#">Link2</a> </li>
于 2013-04-12T09:57:27.097 回答
0

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

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

演示

于 2013-04-12T09:45:56.190 回答