html - CSS: onHover button to display multiple links -

i have button used part of navigation bar.

what need when user hovers on button, buttons text becomes hidden, , 3 different links appear inside button.

the initial button shouldn't have link attached it, 3 options appear after hovered over.

hopefully makes sense; here fiddle might make clearer.

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

at simplest, i'd suggest following:

<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> 

with following css:

/* default display 'li' elements: */ #nav li {     display: inline-block; }  /* hides 'li' elements follow 'li' element,    hides 'li:first-child' when 'ul' hovered: */ #nav li + li, #nav:hover li:first-child {     display: none; }  /* shows 'li' elements follow other 'li' elements,    when 'ul' hovered: */ #nav:hover li + li {     display: inline-block; } 

js fiddle demo.

edited regard question left rygh2014, in comments below:

would work vertical menu well? take have switch out inline-block?

it's absolutely possible have vertical menu, switch 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.

note i've set list-style-type property none, other display property there no marker (under chrome, @ least), whereas list-item glyph there default and, if don't want have explicitly remove it.