Mixing links and dynamic options?

I'm building a web-app and trying to figure out its navigation. There are two similar pages, linked to from the navbar on the top. On each of these pages there is a dropdown with options -- on page 1 this is split into 2 sections, on page 2 it isn't:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Due to the layout, this ends up using a lot of space on the page. The idea is to move these options into the navbar. (Boss's idea.) He wants it like this:

mockup

download bmml source

Here, the dropdowns for A and B are hooked up to JavaScript, while the dropdown for page 2 navigates to another webpage. (The pages are different enough that i do not want to figure out how to get all the content on one page.) The dropdowns are just navigation and do not change -- the currently selected item is represented off to the side.

I suggested something a little different:

mockup

download bmml source

The page 1 dropdown is still hooked up to JS, and page 2 still takes you to another link.


What is the best way to build this interface?

It is likely that more types will be added to page 1 in the future, and possible but unlikely that page 2 will be split into types.