Bootstrap Responsive Menu with Dropdown

As horizontal space changes, items in the menu will be moved in or out of the dropdown as needed. Uses Bootstrap in this demo because I built it for a project, but can easily be changed to use a select element.

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

<div class='header_top_menu'>
    <ul class='nav navbar-nav'>
        <li class='header_top_menu_name'><a href='#'>Welcome, <span>John Doe</span></a></li>
        <!-- after "name", following links should be "items" -->
        <!-- "items" will collapse into dropdown as needed -->
        <li class='header_top_menu_item'><a href='#'>Item 1</a></li>
        <li class='header_top_menu_item'><a href='#'>Item 2</a></li>
        <li class='header_top_menu_item'><a href='#'>Item 3</a></li>
        <li class='header_top_menu_item'><a href='#'>Item 4</a></li>
        <li class='header_top_menu_item'><a href='#'>Item 5</a></li>
        <li class='header_top_menu_item'><a href='#'>Item 6</a></li>
        <li class='header_top_menu_dropdown dropdown'> <a href='#' class='dropdown-toggle' data-toggle='dropdown'>More <b class='caret'></b></a>
            <!-- this is the dropdown "items" collapse into -->
            <!-- even though it is empty, it MUST be here -->
            <ul class='dropdown-menu'></ul>
        </li>
    </ul>
</div>

CSS

p { margin: 10px; }
.header_top_menu {
    float: right;
}
.header_top_menu a {
    color: #404040;
}
.header_top_menu a > span {
    color: #0064a7;
}
.header_top_menu > ul > li > a {
    line-height: 67px !important;
    padding: 0 10px !important;
}
.header_top_menu .header_top_menu_dropdown {
    display: none;
}

JavaScript

// move items into/out of dropdown as window width changes
var windowWidth, windowSize, $HTM, $HTMN, $HTMD, $HTMDM;
var numItemsLarge = 6;
var numItemsMed = 3;

$(window).on('load resize', function () {
    windowWidth = $(window).width();
    $HTM = $('.header_top_menu');
    $HTMN = $('.header_top_menu .nav');
    $HTMD = $('.header_top_menu_dropdown');
    $HTMDM = $('.header_top_menu_dropdown .dropdown-menu');

    if (windowWidth > 1200 && windowSize !== 'large') {
        windowSize = 'large';

        // restore normal state first
        $HTM.find('.dropdown-menu .header_top_menu_item').appendTo($($HTMN));
        $HTMD.hide();

        // now rearrange, if necessary for this state based on num of items
        if ($HTMN.find('.header_top_menu_item').length > numItemsLarge) {
            $HTMN.find('.header_top_menu_item').slice(-($HTMN.find('.header_top_menu_item').length - numItemsLarge)).appendTo($($HTMDM));
            $HTMD.appendTo('.header_top_menu .nav').show();
        }
    } else if (windowWidth > 991 && windowWidth < 1200 && windowSize !== 'med') {
        windowSize = 'med';

        // restore normal state first
        $HTMDM.find('.header_top_menu_item').appendTo($($HTMN));
        $HTMD.appendTo('.header_top_menu .nav');

        // now rearrange
        $HTMN.find('.header_top_menu_item').slice(-($HTMN.find('.header_top_menu_item').length - numItemsMed)).appendTo($($HTMDM));
        $HTMD.show();
    } else if (windowWidth < 992 && windowSize !== 'small') {
        windowSize = 'small';

        // just dump everything into dropdown
        $HTMN.css('margin', '0').find('.header_top_menu_item').appendTo($($HTMDM));
        $HTMD.css({
            display: 'list-item',
            float: 'left'
        }).show();
        $('.header_top_menu_name').css({
            display: 'block',
            float: 'left'
        });
    }
    // edge case of very narrow window width
    // prevents dropdown menu from collapsing to phone view
    if...