vettenut.com Rock Videos menu. Text wider than what is shown. How do I correct this?
You’ve got a fixed width of 300px set on those menu items in your main.css file; it’s too small for the text it needs to display. What I’m not quite so sure of, is why removing that rule doesn’t allow the <li> itself to expand to hold the content within it.
I couldn’t see a Rocks video menu but I often go blind when looking at a new site first time 
I can see the dropdown menu on the ‘Home, Links and Information’ menu at the top of the screen and as Chris said above that has been set with a 300px width.
If you want the items to be as long as the text they hold then you will need to remove the float and remove the width and set white-space to nowrap to force the element wider.
e.g. Add this css after all other css:
#menu ul li ul li{
float:none;
width:auto;
white-space:nowrap;
}
That will allow the text to push the menu wide. If you want a minimum width for the dropdown then add min-width:300px to the above rule.
Note that you seem to be calling 2 main.css files for this menu for some reason as the developer tools show sets of code for the same item.
Also get rid of that right click nonsense as it does nothing but annoy visitors and makes then go elsewhere straight away.
2 Likes
I forgot to mention that - it makes it very difficult to quickly locate an element and see what CSS has been applied to it.
1 Like
Yes I switch to Firefox and use Firebug to debug as it seems to work better on sites like that. You can highlight the items much easier than Chrome.
Disabling user context menus is a cardinal sin of web design and harks back to the 1990s.
2 Likes
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.