submenu collapse instead of fly over dropdown

Question

I am trying to add the functionality of a collapse to my submenu, but no dice yet. I have looked into couple solutions and nothing worked so far.

The issue is that on desktop the menu has a functionality (it opens to the side) and on mobile is suppose to act like a drop down.

Here is some images to help me convey what I am trying to do on mobile:

The first menu is behaving correctly. I want to be like this flyover like dropdown

The Second menu however (green one), I wanted to open like a collapse, showing its sub menus, but still showing the blue menu remaining items below

**Like this **

Here is a fiddle, not sure if you will be able to see the mobile option. Any help would be appreciated.

  $('ul.first-menu>li').click(function(event) {
    var li = $(this);
    var liOld = $('ul.active').parents("li");
    var el = (event.target || event.srcElement);

    $(el).find('span').toggleClass('arrow-down arrow-up');

    if($('ul.active').length!=0){
        $('ul.active').removeClass('active').slideUp('fast', function(){
          if(li.index() != liOld.index()){
             li.children('ul.submenu').slideDown(600).addClass('active');
          }
        });
    }
    else{
       $(this).children('ul.submenu').slideDown(600).addClass('active');
    }
  });

  if ( $(window).width() < 736) {
    var i;
    var $acc = $('.has-children');  
      $acc.click(function(event){
      event.stopPropagation();
      event.preventDefault();
      var el = (event.target || event.srcElement);
      console.log('clicked');
      $(this).find('ul.submenu').toggle();
       $(el).find('span').toggleClass('arrow-down arrow-up');
    });
  }

.bg-nav {
 width: 796px;
 display: flex;
 background-color: #323232;
}

.bg-nav ul {
 background-color: #323232;
  padding: 0;
  display: flex;
  align-items: stretch;
  flex-direction: column;
  margin-bottom: 0;
  width: 80%;
}

.bg-nav ul li {
 list-style-type: none;
 text-align: center;
 border-bottom: .5px solid #ccc;
}

.bg-nav ul li a {
 padding: .8rem 1rem;
 text-decoration: none;
 display: block;
 color: #fff;
 font-family: 'ArialMT', 'Arial';
 font-weight: 400;
 font-size: 13px;
}

.bg-nav ul li:hover {
 background-color: #2c3e50;
}

.bg-nav ul li a:hover {
 color: #fff;
}

.has-children ul, .has-children ul .has-children ul{
  display: none;
  width: 100%;
  position:absolute;
  background-color: #fff;
}

.has-children ul li a {
 color: #00A2CD;
}

.bg-nav .submenu {
 border: 1px solid #ccc;
}

.bg-nav .submenu li {
 text-align: left;
}

.bg-nav .submenu li:hover {
 background-color: #966ea2;
}

.bg-nav .first-submenu li a:hover,
.bg-nav .first-submenu li a:active,
.bg-nav .first-submenu li a:focus {
 color: #fff;
}

.bg-nav .arrow {
 font-family: FontAwesome;
 float: right;
}

.bg-nav .arrow-down::after {
 content: "\f107";
 font-size: 16px;
}

.bg-nav .arrow-up::after {
 content: "\f106";
 font-size: 16px;
}

.bg-nav .arrow-right::after {
 content: "\f105";
 font-size: 16px;
}




@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) {

 .bg-nav {
  justify-content: flex-start;
  width: 100%;
  margin-top: 35px;
 }

 .bg-nav ul {
  width: 100%;
 }

 .bg-nav ul li {
  text-align: left;
  border-bottom: .5px solid #ccc;
 }

 .bg-nav .has-children ul li a {
  padding-left: 25px;
 }

 .bg-nav .has-children ul .has-children ul {
  display: none;
 }

 .bg-nav .first-submenu {
  width: 90%;
  margin-left: 5%;
 }


}

@media only screen and (min-device-width : 736px) {

 .bg-nav {
  align-items: stretch;
  justify-content: center;
  height: 36px;
 }

 .bg-nav .has-children ul li a {
  padding-left: 15px;
 }

 .bg-nav ul {
   flex-direction: row;
   justify-content: center;
 }

 .bg-nav ul li {
  position: relative;
  flex: 1 0;
  border-left: .5px solid #ccc;

 }

 .bg-nav ul li:last-of-type {
  border-right: .5px solid #ccc;
 }

 .bg-nav .submenu li,
 .bg-nav .submenu li:last-of-type {
  border-left: none;
  border-right: none;
 }


  .bg-nav .has-children ul .has-children ul{
    left:100%;
    top: 0;
  }

  .bg-nav .has-children ul {
   display:flex;
   flex-direction:column;
  }

 .bg-nav .has-children ul .has-children:hover ul{
      display:flex;
     flex-direction:column;
 }

 .bg-nav .submenu .arrow-down::after {
  content: "\f105";
  font-size: 16px;
 }

}



.bg-nav .has-children ul,
.submenu, .first-submenu {
    display: none;
}

.arrow {
 pointer-events: none;
}

.has-children ul li {
 background-color: #f5f5f5;
}

.has-children ul {
 display: none;
}

.active {
 display: block;
}

.has-children ul li {
 background-color: lightblue;
}

.has-children ul li .second-submenu li {
 background-color: lightgreen;
}

/** {
 outline: 1px solid orange;
}*/

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="bg-nav">
    <ul class="first-menu">
      <li class="has-children">
        <a href="#">Page 1
          <span class="arrow arrow-down"></span>
        </a>
        <ul class="submenu first-submenu">
          <li><a href="#">Menu 1</a></li>
          <li class="has-children">
            <a href="#">Menu 2
              <span class="arrow arrow-down"></span>
            </a>
            <ul class="submenu second-submenu">
              <li><a href="#">Sub Menu 1</a></li>
              <li><a href="#">Sub Menu 2</a></li>
              <li><a href="#">Sub Menu 3</a></li>
              <li><a href="#">Sub Menu 4</a></li>
              <li><a href="#">Sub Menu 5</a></li>
              <li><a href="#">Sub Menu 6</a></li>
              <li><a href="#">Sub Menu 7</a></li>
            </ul>
          </li>
          <li class="has-children">
            <a href="#">Menu3
              <span class="arrow arrow-down"></span>
            </a>
            <ul class="submenu second-submenu">
              <li><a href="#">Sub Menu 1</a></li>
              <li><a href="#">Sub Menu 2</a></li>
              <li><a href="#">Sub Menu 3</a></li>
              <li><a href="#">Sub Menu 4</a></li>
              <li><a href="#">Sub Menu 5</a></li>
              <li><a href="#">Sub Menu 6</a></li>
              <li><a href="#">Sub Menu 7</a></li>
            </ul>
          </li>
          <li class="has-children">
            <a href="#">Menu 4
              <span class="arrow arrow-down"></span>
            </a>
            <ul class="submenu second-submenu">
              <li><a href="#">Sub Menu 1</a></li>
              <li><a href="#">Sub Menu 2</a></li>
              <li><a href="#">Sub Menu 3</a></li>
              <li><a href="#">Sub Menu 4</a></li>
              <li><a href="#">Sub Menu 5</a></li>
              <li><a href="#">Sub Menu 6</a></li>
              <li><a href="#">Sub Menu 7</a></li>
            </ul>
          </li>
          <li class="has-children">
            <a href="#">Menu 5
              <span class="arrow arrow-down"></span>
            </a>
            <ul class="submenu second-submenu">
              <li><a href="#">Sub Menu 1</a></li>
              <li><a href="#">Sub Menu 2</a></li>
              <li><a href="#">Sub Menu 3</a></li>
              <li><a href="#">Sub Menu 4</a></li>
              <li><a href="#">Sub Menu 5</a></li>
              <li><a href="#">Sub Menu 6</a></li>
              <li><a href="#">Sub Menu 7</a></li>
            </ul>
          </li>
          <li class="has-children">
            <a href="#">Menu 6
              <span class="arrow arrow-down"></span>
            </a>
            <ul class="submenu second-submenu">
              <li><a href="#">Sub Menu 1</a></li>
              <li><a href="#">Sub Menu 2</a></li>
              <li><a href="#">Sub Menu 3</a></li>
              <li><a href="#">Sub Menu 4</a></li>
              <li><a href="#">Sub Menu 5</a></li>
              <li><a href="#">Sub Menu 6</a></li>
              <li><a href="#">Sub Menu 7</a></li>
            </ul>
          </li>
          <li class="has-children">
            <a href="#">Menu 7
              <span class="arrow arrow-down"></span>
            </a>
            </li>
          <li class="has-children">
            <a href="#">Menu 8
              <span class="arrow arrow-down"></span>
            </a>
            <ul class="submenu second-submenu">
              <li><a href="#">Sub Menu 1</a></li>
              <li><a href="#">Sub Menu 2</a></li>
              <li><a href="#">Sub Menu 3</a></li>
              <li><a href="#">Sub Menu 4</a></li>
              <li><a href="#">Sub Menu 5</a></li>
              <li><a href="#">Sub Menu 6</a></li>
              <li><a href="#">Sub Menu 7</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li class="has-children">
        <a href="#">Page 2
          <span class="arrow arrow-down"></span>
        </a>
        <ul class="submenu first-submenu">
          <li><a href="#">Menu 1</a></li>
          <li><a href="#">Menu 2</a></li>
          <li><a href="#">Menu 3</a></li>
          <li><a href="#">Menu 4</a></li>
          <li><a href="#">Menu 5</a></li>
          <li><a href="#">Menu 6</a></li>
          <li><a href="#">Menu 7</a></li>
        </ul>
      </li>
      <li class="has-children">
        <a href="#">Page 3
          <span class="arrow arrow-down"></span>
        </a>
        <ul class="submenu first-submenu" value="hide/show">
          <li><a href="#">Menu 1</a></li>
          <li><a href="#">Menu 2</a></li>
          <li><a href="#">Menu 3</a></li>
          <li><a href="#">Menu 4</a></li>
          <li><a href="#">Menu 5</a></li>
        </ul>
      </li>
      <li><a href="#">Page 4</a></li>
    </ul>   
  </div>