Make ul increase width as per the content

css drupal html-lists superfish
esafwan picture esafwan · Feb 17, 2012 · Viewed 13.3k times · Source

I am having superfish menu implemented in this site

If you hover over the product menu, the drop down will be exactly the width of the main parent menu, even when the content is larger. How do I make the menu go wider as per the content in it. Now the content simply overflows.

Answer

Zeta picture Zeta · Feb 17, 2012

Add the following styles to your grid.css or to any other .css-file / header after grid.css:

.sf-menu ul{
    min-width:100%; /* at least the size of the header */
    width:auto; /* size the block automatically */
}
.sf-menu ul li{
    white-space:nowrap; /* prevent word wrap */
}

Notice that this won't have the same results in IE7, however your website is not presented the same in IE7. Works in IE8, IE9 and Firefox 10 (should work in all CSS2 compliant browser).

Related questions

CSS to hide INPUT BUTTON value text

I am currently styling an <input type='button'/> element with the following CSS: background: transparent url(someimage); color: transparent; I want the button to show as an image, but I don't want the value text to display on …

Read More
How to reference a long class name with spaces in CSS?

I'm trying to style some Drupal output. In particular, I'm trying to reference a class with a super long name (that includes spaces). I'm unclear the syntax for this. Forgive me, I'm a CSS newbie. See: <article id="node-38" …

Read More
Why does my website scroll slowly, and why are its hover effects laggy? How can I fix this?

So I have this site here which has major performance issues. Scrolling is very slow, hover effects have a bit of lag and other similar issue. Unfortunately right now I am working off a cheap host so I don't have …

Read More