By john.kenney on

Is there a way in CSS to cause the width of secondary flyouts to be self-adjusting to the width of the widest secondary menu item in EACH primary link?

As is, I have set the width of all flyouts across the entire site to be the same.

This accommodates the longest/widest menu item text across all the secondary menu items, but this width is wider than strictly necessary for many/most groups of secondary items.

Are there CSS settings that would enable the secondary menu drop downs to self-adjust to the width of the longest secondary menu item FOR EACH primary link? Or is this something that requires Javascript?

Not sure if that is clear.

Live site is here: www.AboutCallingCards.com.

Thanks for any assistance.

⋅ Categories: Drupal 6.x

Comments

ehart’s picture

ehart commented

I'm not sure how to do it automatically. If I were you, I would manually set the width of each flyout using the id of the li. For example, the id of the "How to buy" item is "menu-428".

So I think your CSS would look similar to this:

#nice-menu-1 li#menu-428 li{
  width: /*An appropriate width for this flydown*/;
}

I haven't tested this, but hopefully it's in the right ballpark.

john.kenney’s picture

john.kenney commented

I had thought of that and it is certainly doable.

The complication is that i need to use such function on many sites each with their own menu.

If only this one, then I'd do, but would be too much work to manually adjust all of them.