CSS: onHover button to display multiple links - html

Question

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>Test</li>
</ul>

Answer 1

At its simplest, I'd suggest the following:
<ul id="nav">
<li>Navigation</li>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
With the following 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.
Edited with regard to question left by Rygh2014, in comments below:
Would this work for a vertical menu as well? I take it I would just have to switch out the inline-block?
It's absolutely possible to have a vertical menu, simply switch from display: inline-block to 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.
Note that I've also set the list-style-type property to none, as with any other display property there is no marker (under Chrome, at least), whereas with list-item the glyph is there by default and, if you don't want it you have to explicitly remove it.