html - CSS:在悬停按钮上显示多个链接

Question

我有一个按钮将用作导航栏的一部分。

我需要的是当用户将鼠标悬停在按钮上时，按钮文本会隐藏，并且按钮内会出现三个不同的链接。

初始按钮本身不应该有一个链接，只有悬停在它上面后出现的三个选项。

希望这是有道理的；这是一个 fiddle这可能会使它更清楚。

  <ul class="ulmenu">
  <li><a href=# class="a">Test</a></li>
  </ul>

Answer 1

最简单的，我建议如下:

<ul id="nav">
    <li>Navigation</li>
    <li><a href="#opt1">Option 1</a></li>
    <li><a href="#opt2">Option 2</a></li>
    <li><a href="#opt3">Option 3</a></li>
</ul>

使用以下 CSS:

/* default display for all 'li' elements:
*/
#nav li {
    display: inline-block;
}

/* hides the 'li' elements that follow an 'li' element,
   hides the 'li:first-child' when the 'ul' is hovered:
*/
#nav li + li,
#nav:hover li:first-child {
    display: none;
}

/* shows the 'li' elements that follow other 'li' elements,
   when the 'ul' is hovered:
*/
#nav:hover li + li {
    display: inline-block;
}

JS Fiddle demo .

针对 Rygh2014 留下的问题进行编辑，在下面的评论中:

Would this work for a vertical menu as well? I take it I would just have to switch out the inline-block?

垂直菜单完全可以，只需将 display: inline-block 切换为 display: list-item 即可:

#nav,
#nav li {
    list-style-type: none;
}
#nav li {
    display: list-item;
}

#nav li + li,
#nav:hover li:first-child {
    display: none;
}

#nav:hover li + li {
    display: list-item;
}

JS Fiddle demo .

请注意，我还将 list-style-type 属性设置为 none，与任何其他 display 属性一样，没有标记(至少在 Chrome 下是这样)，而对于 list-item，字形默认存在，如果您不想要它，则必须明确删除它。