Первый элемент, видимый в раскрывающемся меню щелчка

$(document).ready(function(){
 var a=$('.itemscabecera')[0]
 $(a).addClass('active');
})
$(document).on('click', '.itemscabecera', function(e){
  e.stopPropagation();
  $('.itemscabecera').not($(this)).removeClass('active');
  $(this).toggleClass('active');
});

$('.itemscabecera').on('click', function() {
  $('.itemscabecera').removeClass('active');
});

$(document).on('click', '.mega-menu', function(e){
  e.stopPropagation(); 
})

.itemscabecera {width: 12%;
margin:0.15rem; 
-webkit-border-radius: 6;
-moz-border-radius: 6;
border-radius: 6px;
color: #ffffff;
padding: 15px 3px 20px 3px;
text-decoration: none;
text-align:center;
float:left;
display: inline-block;
background-color: #000;
position: relative;
font-family: Arial;
cursor: pointer;
}


.mega-menu {
  position: absolute;
  bottom: 0;
  background-color: #ffffff;
  border: 1px solid #000000;
  color: #000000;
  display: none;
  width: 140px;
  bottom: -92px;
  left: -1px;
}


.itemscabecera.active .mega-menu {
  display: block;
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "itemscabecera">
    <span>1st menu</span>
    <div class = "mega-menu">
      <ul>
        <li>menuitem1</li>
        <li>menuitem2</li>
        <li>menuitem3</li>
      
      </ul>
    </div>
  </div>
  <div class = "itemscabecera">
    <span>2nd menu</span>
    <div class = "mega-menu">
      <ul>
        <li>menuitem1</li>
        <li>menuitem2</li>
        <li>menuitem3</li>
 
      </ul>
    </div>
  </div>
  <div class = "itemscabecera">
    <span>3rd menu</span>
    <div class = "mega-menu">
      <ul>
        <li>menuitem1</li>
        <li>menuitem2</li>
        <li>menuitem3</li>
 
      </ul>
    </div>
  </div>
  <div class = "itemscabecera">
    <span>4th menu</span>
    <div class = "mega-menu">
      <ul>
        <li>menuitem1</li>
        <li>menuitem2</li>
        <li>menuitem3</li>
 
      </ul>
    </div>
  </div>
  
    <div class = "itemscabecera">
    <span>5th menu</span>
    <div class = "mega-menu">
      <ul>
        <li>menuitem1</li>
        <li>menuitem2</li>
        <li>menuitem3</li>
  
      </ul>
    </div>