Two Horizontal dropdowns only at Top of Page

This is a newby question, so please bear with me. In the navigation template (I think) exists this code:

<div class = "navbar-collapse collapse">
   <ul class = "nav navbar-nav navbar-right">
      {% for page in pages.children %}
      {% if page.visible %}
      {% set current_page = (page.active or page.activeChild) ? 'active' : '' %}
      <li class = "{{ current_page }}"><a href = "{{ page.url }}">{{ page.menu }}</a></li>
      {% endif %}
      {% endfor %}
   </ul>
</div>

This, from my understanding, creates the drop down menu at the top of the page (correct me if I'm wrong). I suppose that if I continue creating new pages, they will continue creating new dropdown menus across the top of the page. But what I want is only two dropdown menu categories at the top. The other categories and menu items I plan on putting in a sidebar vertically.

How do I get it to only create the first two categories and then stop?

@dpdoug,

This, from my understanding, creates the drop down menu at the top of the page (correct me if I’m wrong).

No it doesn't create dropdown menu-items. It creates a menu containing only visible top-level pages. For creating dropdown items, it would need to loop through each page's children.

Note the highlighted "visible" and have a look at the docs on Visible