Menu
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.
209
You just put width property to ul element.
Yes, as per the CSS 2.1 Specification, all non-negative values are valid for width, that includes percentage values above 100%. Show activity on this post. Percentage values simply represent a percentage of the length of the element's container.
You'd have to work on your code because you can't assign widths to inline elements. But this can be solved by setting the display to block and by floating it.
What you could do is set your div to be position: absolute so your div is independent of the rest of the layout. Then say width: 100% to have it fill the screen width. Now just use margin-left: 30px (or whatever px you need) and you should be done.
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).
127
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
