Variable width dropdown menu?

[Mickey]

I’m not a CSS or Javascript guru but I thought this would be simple. Maybe I’m missing something but I can’t find an example of this anywhere either.

I have an small image and when the cursor hovers over it I simply want a dropdown information textbox/menu (with embedded hrefs). The gotcha seems to be that the contents of the textbox can vary in width from a single word to a lengthy paragraph so I want the text box to vary in width according to its contents. Width should be width of the single word upto ‘max-width’ then the text wraps. I’ve tried so many different options using UL/LI’s, DIV’s, SPAN’s, jQuery I’m not sure what to give as an example.

Any help appreciated or a pointer to the example I can’t seem to find.

[vasanth]

Hi mikey, I’m not able to understand the correct thing. Post your site link.

[Mickey]

Hi vasanth, here’s my most recent piece of code which does not allow any text further than the width of the image above it.

Text that should go to 300px then wrap but only goes the width of the image above.

[georgearnall]

If you want us to help you it would be easier for us to see this in [CodePen](http://codepen.io/pen “codepen”). Or you could post a link to your project.

Thanks :)

[Mickey]

Sorry I’m new to this forum and just getting to grips with it.

Try this – http://codepen.io/Mickey/pen/xjflw

[dgriesel]

Have a look at [this](http://codepen.io/anon/pen/IHBEp “”)

First of all, you don’t need to duplicate the styles for #d2 in #d2:hover, because they are still applied.
Second, you don’t need JS at all. This CSS #d1:hover #d2 is your friend.

In order to solve your original problem, I added a container div for the dropdown and set its width to 300px (or set it to whatever you want, as long as it is wider than your dropdown content’s maximum width.
Inside this container div, the dropdown can resize with the text.

Oh btw: I wouldn’t use IDs as selectors. Use classes!

[Mickey]

Excellent, thanks. Yes I had tried a few things so what I posted was messy.

Simple when you know how!

Thanks again.

[Author]

Posts