Set fixed width for top navigation

Question

I am trying to set a fixed width for TopNavigationMenu but in CSS if i do it then it does set fixed with but the menu items go beyond the width.

Is there any we can restrict the width of the menu and enable menu to be displayed in multiple lines?

I am not an expert in CSS so would like to know if i need to explore any specific property in order to get this done.

Answer 1

Here is quick dirty solution:

• Add an extra Menu item, name it whatever your want,
  this is were the linebreak will be forced in

• count which LI nth-child this is

• add CSS to display this LI item as a block, and force TWO linebreaks (before and after)

• add CSS so this blocked LI is not visible and has 0px height,
  so it looks like one linebreak

#zz12_RootAspMenu li:nth-child(3) {
    display: block;
    border:1px solid red;
    /* visibility:hidden; */
    /* height:0; */
}

Edit the links will screw up the HTML, so this only seems to work on page load

A nicer solution would be to use position:relative on a parent DOM element and apply float:left to those LIs, but takes some more experimenting and way more CSS rules