0

I have a button that will be used as a part of a navigation bar.

What I need is when a user hovers over the button, the buttons text becomes hidden, and three different links appear inside the button.

The initial button itself shouldn't have a link attached to it, just the three options that appear after it is hovered over.

Hopefully this makes sense; Here is a fiddle which might make it clearer.

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

1 回答 1

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 小提琴演示。

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

这也适用于垂直菜单吗？我认为我只需要切换内联块？

绝对有可能有一个垂直菜单，只需从 切换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 小提琴演示。

请注意，我还将list-style-type属性设置为none，与任何其他display属性一样，没有标记（至少在 Chrome 下），而list-item默认情况下，字形就在那里，如果你不想要它，你必须明确删除它。

于 2013-07-21T17:14:29.960 回答