How to make submenu act like dropdown but show first value like select

Question

<nav class="navbar navbar-default">
 <div class="container">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-nav">
      <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
      <a class="navbar-brand" href="#">ADEX</a>
    </div>
    <div class="collapse navbar-collapse" id="main-nav">
      <ul class="nav navbar-nav nav-page">
        <li class="dropdown">
          <a href="#">Home</a>
        </li>
        <li class="dropdown">
          <a href="#" data-toggle="collapse" data-target="#one">About</a>
        </li>
        <li class="dropdown">
          <a href="#" data-toggle="collapse" data-target="#two">Programmes</a>
        </li>
        <li class="dropdown">
          <a href="#" data-toggle="collapse" data-target="#three">Info</a>
        </li>
        <li class="dropdown">
          <a href="#" data-toggle="collapse" data-target="#four">Travel</a>
        </li>

      </ul>
    </div>
  </div>
  <div class="sub-nav"></div>
 </div>
</nav>
<nav class="submenu">
  <div class="container">

  <ul class="nav nav-justified">
    <li>
      <ul class="nav nav-justified collapse" id="one">
           <li class="active"><a href="#">2015</a></li>
           <li class="active"><a href="#">About Mission</a></li>
           <li><a href="#">History</a></li>
      </ul>
    </li>
    <li>
      <ul class="nav nav-justified collapse" id="two">
         <li><a href="#">A</a></li>
         <li><a href="#">B</a></li>
         <li><a href="#">C</a></li>
         <li><a href="#">D</a></li>
      </ul>
    </li>
    <li>
      <ul class="nav nav-justified collapse" id="three">
         <li><a href="#">E</a></li>
         <li><a href="#">F</a></li>
      </ul>
    </li>
    <li>
      <ul class="nav nav-justified collapse" id="four">
        <li><a href="#">G</a></li>
        <li><a href="#">H</a></li>
      </ul>
    </li>
  </ul>
</div>
</nav>

CSS

.submenu{
  background: #404040;
  margin-bottom: 20px;
  height: 67px;
  padding: 15px;
}

.nav-justified > li > 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 > li > a:hover,
.nav-justified > li > 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 > li > a{
  color: #000!important;
  font-weight: 300;
  letter-spacing: 2px;
}

@media (min-width: 768px){
.navbar-nav > li > a {
  padding-top: 30px;
  padding-bottom: 30px;
 }
}

.navbar-nav > li:hover > a{
  border-top: 7px solid #0083A0;
  border-bottom: 7px solid #0083A0;
  padding-top: 23px;
  padding-bottom: 23px;
}

.nav-page > li > a{
  padding: 0;
}

.nav-page > li{
  padding: 30px 15px;
}

.nav-page > li:hover{
  padding: 0 15px }

Jquery

$('.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);
  });

JSFiddle Demo

Unable to make submenu dropdown with collapse to close and expand to open.

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.

1. How to make submenu as similar as dropdown select?

2. 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.

Any help appreciated.

This is the example of what I am looking for.

Main navigation should be in its own bar and submenu navigation should be in its own bar whether desktop or mobile.

Then on mobile screen, submenu navigation should be acting as dropdown. It will show the list of the selected list from main navigation

Answer 1

Here is the updated fiddle.

I've changed the hierarchy so that the sub-menu is aligned properly to the main-menu. Without the hierarchy change the alignment would be impossible with pure CSS.

I used some JavaScript for the toggle until I figured out data-toggle. So no JavaScript ^.^

I used a select tag for the drop down, which works just fine but cannot be customized. There is a workaround to change the arrow. Refer to this post for the instructions.

My changes to your fiddle are as follows

CSS:

div.sub_menu {
    display: none;
    position:absolute;
    bottom: -50px;
    min-width: 100%;
}

div.sub_menu.in {
    display: block;
}

div.sub_menu > select {
    background: #404040!important;
    min-width: 100%;
    color: white;
    height: 50px;
    font-size: 24px;
}

HTML:

<ul class="nav navbar-nav nav-page">
    <li class="dropdown">
        <a href="#">Home</a>
     </li>
    <li class="dropdown">
        <a href="#" data-toggle="collapse" data-target="#one">About</a>
        <div class="sub_menu nav nav-justified collapse" id="one">
            <select>
            <option value="2015">2015</option>
            <option value="Mission">Mission</option>
            <option value="History">History</option>
            </select>
        </div>
    </li>
    <li class="dropdown">
        <a href="#" data-toggle="collapse" data-target="#two">Programmes</a>
        <div class="sub_menu nav nav-justified collapse" id="two">
            <select>
            <option value="A">A</option>
            <option value="B">B</option>
            <option value="C">C</option>
            <option value="D">D</option>
            </select>
        </div>
    </li>
    <li class="dropdown">
        <a href="#" data-toggle="collapse" data-target="#three">Info</a>
        <div class="sub_menu nav nav-justified collapse" id="three">
            <select>
            <option value="E">E</option>
            <option value="F">F</option>
            </select>
        </div>
    </li>
    <li class="dropdown">
        <a href="#" data-toggle="collapse" data-target="#four">Travel</a>
        <div class="sub_menu nav nav-justified collapse" id="four">
            <select>
            <option value="G">G</option>
            <option value="H">H</option>
            </select>
        </div>
    </li>
</ul>