My vertical dropDownMenu items are causing my menu pane div section to scroll horizontally. I'm using a css style with a banner, left menu, and a content layout scheme.

My menu div pane is 201px wide. When I use the dropDownMenu vertical option the submenus cause the menu pane to scroll horizontally. This is probably a CSS question but how do I get the submenu entries to display without causing the menu pane to scroll.

In other words I want the submenu items to display into my content area. This works fine if the menu items are displayed horizontally in my banner section. The menu items drop down into the menu and content sections.

<h:panelGrid columns="1" border="0">
 <rich:dropDownMenu value="Option1" direction="bottom-right"
 jointPoint="tr">
 <rich:menuItem value="Suboption1-1" />
 <rich:menuItem value="Suboption1-2">

 </rich:menuItem>
 <rich:menuItem value="Suboption1-3" />
 </rich:dropDownMenu>
 <rich:dropDownMenu value="Option2" direction="bottom-right"
 jointPoint="tr">
 <rich:menuItem value="Suboption2-1" />
 <rich:menuItem value="Suboption2-2" />
 <rich:menuGroup value="Group2">
 <rich:menuItem value="SuboptionG2-2-1" />
 <rich:menuItem value="SuboptionG2-2-2" />
 </rich:menuGroup>

 <rich:menuItem value="Suboption2-3" />
 </rich:dropDownMenu>
 <rich:dropDownMenu value="Option3" direction="bottom-right"
 jointPoint="tr">
 <rich:menuItem value="Suboption3-1" />
 <rich:menuItem value="Suboption3-2" />
 <rich:menuItem value="Suboption3-3" />
 </rich:dropDownMenu>

</h:panelGrid>

#menu {
 background-color: rgb(161, 197, 245);
 width: 201px;
 float: left;
 border: solid #333333;
 border-width: 0 2px 0 0;
 margin: 0;
}