title: How to make submenu act like dropdown but show first value like select
body: <pre><code>&lt;nav class="navbar navbar-default"&gt;
   &lt;div class="container"&gt;
    &lt;div class="navbar-header"&gt;
      &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-nav"&gt;
        &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
      &lt;/button&gt;
        &lt;a class="navbar-brand" href="#"&gt;ADEX&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="collapse navbar-collapse" id="main-nav"&gt;
        &lt;ul class="nav navbar-nav nav-page"&gt;
          &lt;li class="dropdown"&gt;
            &lt;a href="#"&gt;Home&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="dropdown"&gt;
            &lt;a href="#" data-toggle="collapse" data-target="#one"&gt;About&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="dropdown"&gt;
            &lt;a href="#" data-toggle="collapse" data-target="#two"&gt;Programmes&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="dropdown"&gt;
            &lt;a href="#" data-toggle="collapse" data-target="#three"&gt;Info&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="dropdown"&gt;
            &lt;a href="#" data-toggle="collapse" data-target="#four"&gt;Travel&lt;/a&gt;
          &lt;/li&gt;
  
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="sub-nav"&gt;&lt;/div&gt;
   &lt;/div&gt;
  &lt;/nav&gt;
  &lt;nav class="submenu"&gt;
    &lt;div class="container"&gt;
  
    &lt;ul class="nav nav-justified"&gt;
      &lt;li&gt;
        &lt;ul class="nav nav-justified collapse" id="one"&gt;
             &lt;li class="active"&gt;&lt;a href="#"&gt;2015&lt;/a&gt;&lt;/li&gt;
             &lt;li class="active"&gt;&lt;a href="#"&gt;About Mission&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="#"&gt;History&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;ul class="nav nav-justified collapse" id="two"&gt;
           &lt;li&gt;&lt;a href="#"&gt;A&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a href="#"&gt;B&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a href="#"&gt;C&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a href="#"&gt;D&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;ul class="nav nav-justified collapse" id="three"&gt;
           &lt;li&gt;&lt;a href="#"&gt;E&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a href="#"&gt;F&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;ul class="nav nav-justified collapse" id="four"&gt;
          &lt;li&gt;&lt;a href="#"&gt;G&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;H&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.submenu{
    background: #404040;
    margin-bottom: 20px;
    height: 67px;
    padding: 15px;
  }
  
  .nav-justified &gt; li &gt; a{
    display: inline-block;
    color: #fff;
    float: left;
    font-weight: 300;
    letter-spacing: 1px;
    padding: 10px;
    white-space: nowrap;
  }
  
  
  .collapsing {
    display:none;
  }
  
  .nav-justified .active:before {
    content: '';
    width: 0px;
    height: 0px;
    display: inline-block;
    vertical-align: middle;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #f9f9f9;
    position: absolute;
    top: 42px;
    right: 0;
    left: 0;
    bottom: 0;
    margin: 0 auto;
  }
  
  .nav-justified &gt; li &gt; a:hover,
  .nav-justified &gt; li &gt; a:focus{
    background-color: transparent;
    color: #333;
  }
  
  .navbar-brand{
    display: none;
  }
  @media (max-width: 768px){
    .navbar-brand{
      display: block;
    }
  }
  
  .navbar{
    background: #F1F1F1!important;
    border: 0!important;
    margin-bottom: 0;
  }
  
  .navbar-nav &gt; li &gt; a{
    color: #000!important;
    font-weight: 300;
    letter-spacing: 2px;
  }
  
  @media (min-width: 768px){
  .navbar-nav &gt; li &gt; a {
    padding-top: 30px;
    padding-bottom: 30px;
   }
  }
  
  .navbar-nav &gt; li:hover &gt; a{
    border-top: 7px solid #0083A0;
    border-bottom: 7px solid #0083A0;
    padding-top: 23px;
    padding-bottom: 23px;
  }
  
  .nav-page &gt; li &gt; a{
    padding: 0;
  }
  
  .nav-page &gt; li{
    padding: 30px 15px;
  }
  
  .nav-page &gt; li:hover{
    padding: 0 15px }
  </code></pre>
  
  <p>Jquery</p>
  
  <pre><code>$('.collapse').on('shown.bs.collapse', function (e) {
      $('.collapse').not(this).removeClass('in');
    });
  
    $('[data-toggle=collapse]').click(function (e) {
      $('[data-toggle=collapse]').parent('li').removeClass('active');
      $(this).parent('li').toggleClass('active');
         var text = $(this).text();
      $('.navbar-brand').html(text);
    });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/dreamlex/8uon0g4g/" rel="nofollow noreferrer">JSFiddle Demo</a></p>
  
  <p><img src="https://i.stack.imgur.com/Spax3.png" alt="Screenshot example"></p>
  
  <p>Unable to make submenu dropdown with collapse to close and expand to open. </p>
  
  <p>Screenshot showed one main nav with the list and submenu dropdown will automatically "populate" the submenu list from the main nav. The first will show 'A' in the dropdown menu and then it will enable the users to click arrow down to see the full submenu list under Programmes for example.</p>
  
  <ol>
  <li><p>How to make submenu as similar as dropdown select?</p></li>
  <li><p>How to make submenu display first text? For example, submenu list has A, B, C, D. So it should show A first. then user clicks on arrow down to see more submenu list - A B C D.</p></li>
  </ol>
  
  <p>Any help appreciated.</p>
  
  <p><img src="https://i.stack.imgur.com/Ms4xk.png" alt="Show you better example of what I am looking for"></p>
  
  <p>This is the example of what I am looking for. </p>
  
  <p>Main navigation should be in its own bar and submenu navigation should be in its own bar whether desktop or mobile.</p>
  
  <p>Then on mobile screen, submenu navigation should be acting as dropdown. It will show the list of the selected list from main navigation</p>