ADF Menus for Page Navigation

Question

I have completed the [ADF Menus for Page Navigation|http://www.oracle.com/technology/products/jdev/11/cuecards/adf_set_43/ccset43_ALL.html] tutorial.
Everything work as expected, with one exception. The 'Add and Bind Navigation Pane Components' section has you put a Navigation Pane in the menBar facet of the panel header. In the Hint dropdown you select 'buttons' and set some other properties.
When I run the finished project, the menu items in the menbar are displaying vertically instead of horizontally as the image with the tutorial shows. Why? How do I get them to display horizontally?
I really like that menu model and plan utilizing it in real world application; unfortunately, have the menubar dislay vertically in the panel header is unacceptable.
<f:facet name="top">
        <af:panelHeader text="ADF Menu Example" id="pt_ph1" size="0">
          <f:facet name="context"/>
          <f:facet name="menuBar">
            <af:navigationPane id="pt_np1" hint="buttons" var="menuInfo"
                               value="#{root_menu}">
              <f:facet name="nodeStamp">               
                  <af:commandNavigationItem text="#{menuInfo.label}"
                                            id="pt_cni1" icon="#{menuInfo.icon}"
                                            destination="#{menuInfo.destination}"
                                            action="#{menuInfo.doAction}"/>
              </f:facet>
            </af:navigationPane>
          </f:facet>
          <f:facet name="legend"/>
          <f:facet name="info"/>
        </af:panelHeader>
      </f:facet>

Answer 1

Ok, I am still at a loss as to why this is happening.
It seems to be related to the either navigationpane or the menu meta data.
I have only foudn one difference so far. The tutorial states that JDeveloper us org.apache.myfaces.trinidad.model.XMLMenuModel managed bean class by default; however, my project used oracle.adf.view.rich.model.MDSMenuModel. When I use the XMLMenuModel, the only visible diference is in the Visual Editor and the Preview panes. The menus appear horizontally in those panes, but not when you run the application in a web borwser.
Still troubleshooting.
[Tutorial: ADF Menu Model Managed Beans|http://www.oracle.com/technology/products/jdev/11/cuecards/adf_set_43/ccset43_tellme4_5.html]
My project code:
<?xml version="1.0" encoding="windows-1252" ?>
<adfc-config xmlns="http://xmlns.oracle.com/adf/controller" version="1.2">
  <metadata-resource>/WEB-INF/adfc-sale-config.xml</metadata-resource>
  <metadata-resource>/WEB-INF/adfc-products-config.xml</metadata-resource>
  <view id="home">
    <page>/home.jspx</page>
  </view>
  <view id="help">
    <page>/help.jspx</page>
  </view>
  <view id="preferences">
    <page>/preferences.jspx</page>
  </view>
  <view id="shop">
    <page>/shop.jspx</page>
  </view>
  <control-flow-rule id="__1">
    <from-activity-id id="__2">*</from-activity-id>
    <control-flow-case id="__3">
      <from-outcome id="__4">adfMenu_home</from-outcome>
      <to-activity-id id="__5">home</to-activity-id>
    </control-flow-case>
    <control-flow-case id="__6">
      <from-outcome id="__7">adfMenu_help</from-outcome>
      <to-activity-id id="__8">help</to-activity-id>
    </control-flow-case>
    <control-flow-case id="__9">
      <from-outcome id="__10">adfMenu_preferences</from-outcome>
      <to-activity-id id="__11">preferences</to-activity-id>
    </control-flow-case>
    <control-flow-case id="__12">
      <from-outcome id="__13">adfMenu_shop</from-outcome>
      <to-activity-id id="__14">shop</to-activity-id>
    </control-flow-case>
  </control-flow-rule>
  <managed-bean id="__15">
    <description id="__17">Menu Model Managed Bean</description>
    <managed-bean-name id="__16">root_menu</managed-bean-name>
    <managed-bean-class>oracle.adf.view.rich.model.MDSMenuModel</managed-bean-class>
    <managed-bean-scope id="__18">request</managed-bean-scope>
    <managed-property id="__20">
      <property-name id="__19">createHiddenNodes</property-name>
      <value id="__21">false</value>
    </managed-property>
    <managed-property id="__23">
      <property-name id="__25">source</property-name>
      <property-class id="__24">java.lang.String</property-class>
      <value id="__22">/WEB-INF/root_menu.xml</value>
    </managed-property>
  </managed-bean>
</adfc-config>