10

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.

esafwan
  • 17,311
  • 33
  • 107
  • 166

1 Answers1

18

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

Zeta
  • 103,620
  • 13
  • 194
  • 236
  • I think I should add a max-width also. – esafwan Feb 18 '12 at 05:20
  • @Zeta Its now useless question and answer as well! I did not find grid.css anywhere because link is not working now :( – Kunj Apr 16 '14 at 11:30
  • @KunJ: This answer is more than two years old and therefor not really something I recall. If you believe that the question is still meaningful, but missing external sources for this, state this in a comment __on the question__, maybe the OP can fix it. If on the other hand you believe that the question is completely useless either way and doesn't follow the question rules, vote to close or flag it. – Zeta Apr 16 '14 at 14:35
  • Thanks @Zeta! This question/answer isn't useless.. it saved my menu! I am not using a superfish menu but the principal of adding white-space:nowrap; in my menu.css did make the job! Thanks so much! – MagTun Jul 04 '14 at 10:22