Horizontal Dynamenu formatting

[sbetto]

I have installed Dynamenu and am using the horizontal drop down option in my header. I would like to split the main horizontal menu items over 2 lines as I have too many items for just one line in the header. So for example the first 8 items would appear on the first line, and the rest on the line underneath.(currently the menu is all in one line across my web page and completely blowing out the width of my page!).

I am guessing I need to put the appropriate width setting in somewhere below along with some kind of wrap / new line something??? Can anyone steer me in the right direction?

Cheers,

Sarah (site is barefootmaternity.com.au/NewSite/catalog/index.php)

 

 

.horbar { /* Color of main horizontal menubar and border */

color: white;

background-color: #8c0d2d;

border: 1px outset #525252;

}

 

.horizitem { /* Behaviour of main horizontal menu items, leave as is for proper operation */

float: left;

white-space: nowrap;

position: relative;

 

}

 

.horizitem a { /* Font style, size of submenu items */

font-family: Verdana, Arial, sans-serif;

font-size: 12px;

text-decoration: none;

position: relative;

display: block;

 

 

}

.horizitem a:link, .horizitem a:visited { /* Font style & color of main menu items */

color: #FFFFFF;

text-decoration: none;

}

 

.horizitem a:hover { /* Font style & color, background menu color of main menu item when hovered over */

color: #ffffff;

background-color: #21459c;

text-decoration: none;

}

 

.horizitem a:active { /* Font style & color, background menu color of main menu item when clicked */

color: #ffff00;

background-color: #666666;

text-decoration: none;

}

 

.horizsubmenu { /* Behaviour of sub-menu items - leave as is for proper operation of submenus */

position: absolute;

left: 0;

top: 0;

visibility: hidden;

}

 

.horizsubframe { /* Color of submenu item and border */

background-color: #e6e7e6;

border: 2px outset #fdfefd;

 

position: relative;

display: block;

}

 

.horizsubitem { /* Behaviour of sub-menu items - leave as is for proper operation of submenus */

text-align: left;

white-space: nowrap;

}

 

.horizsubitem a { /* Font style, size of submenu items */

font-family: Verdana, Arial, sans-serif;

font-size: 12px;

text-decoration: none;

 

position: relative;

display: block;

}

 

.horizsubitem a:link, .horizsubitem a:visited { /* Font color, style of submenu items */

color: #000000;

font-size: 12px;

text-decoration: none;

}

 

.horizsubitem a:hover { /* Font color, style, background submenu color of submenu item when hovered over */

color: #ffffff;

background-color: #21459c;

text-decoration: none;

}

 

.horizsubitem a:active { /* Font color, style, background submenu color of submenu item when clicked */

color: #ffff00;

background-color: #666666;

text-decoration: none;

}

 

.horizsubitem .horizfwdarr, .horizitem .horizfwdarr { /* Positioning of right arrow for submenus */

position: absolute;

top: 5px;

right: 8px;

}

 

.dmselected { /* Style override for selected category tree */

background-color: #ccc;

font-weight: bold;

}

 

.horbar .dmselected { /* Style override for selected root category */

background-color: #999;

}