fmz 14

I have a horizontal drop down navigation that is run by Javascript. Everything was working fine until the client decided he wanted longer titles in the navigation. Now instead of equally sized navigation buttons I have to make each button relative.

This would be okay except now it messes up the sub navigation. I spent about two hours trying to tweak the drop down menus but I have not been able to get them to fill the space properly. Basically I need to be able to customize the width for each drop down group to match as closely as possible the parent width.

Please check the link associated with this entry. The home sub menus work fine but the sub menus on the longer titles are ugly.

Top points to anyone that can help me resolve this.

1 answer

danwellman 5600
This was chosen as the best answer

umm, width:100%; seems to work on the li ul li selector, unless I'm reading the question wrong ;)

Answered over 8 years ago by danwellman
  • Dan, this works pretty good. At first glance the problem is solved. However, there are two small concerns: The Home menu is now too short and for some reason the Economy and You Podcast submenu is way too short. Any thoughts there? fmz over 8 years ago
  • Hi, cool, glad it helped. With the ones that are too short, maybe it would be best to specify exact pixel values for the widths of these? You give the ul under the home menu a class of 'home' then use li ul.home li { width:100px; } to override the 100% rule? danwellman over 8 years ago
  • Yes fmz, the width of the level 1 menu items have to be the width of their widest child item. Dan's solution will then be perfect. o.k.w over 8 years ago
  • Dan. Well done. Problem solved. Thank you! fmz over 8 years ago