Absolute div's width becomes so small that the text is wrapping

Question

When I make a button I want to make a div that appears when I hover the button, though I have problems with it's width and it's position.

The problem can be seen below in the pictures and in the jsfiddle. When I make something absolute to the relative button, it looks like it's max-width becomes the width of the button. If the button is small, the hover div will also be small. How can I make a normal hover div with a width:auto?

http://jsfiddle.net/ghpc9fwk/

Answer 1

Just add a white-space: nowrap; attribute to prevent the text from wrapping on nearest occasions;)

Here's a working example: http://jsfiddle.net/1revewwm/

I 've also modified the bottom attribute