Выпадающая меню на всю ширину

$(document).ready(function () { 
	"use strict"; 
	function mineMenu(thisElenent) { 
		var visiOne, visiTwo , visiThree; 
		var thisHide = thisElenent; 
		switch(thisHide) { 
			case 'festival':  
	visiOne = 'media'; visiTwo = 'calendar'; visiThree = 'cooper'; 
	break; 
case 'media':   
	visiOne = 'festival'; visiTwo = 'calendar'; visiThree = 'cooper'; 
	break; 
	 
case 'calendar':  
	visiOne = 'festival'; visiTwo = 'media'; visiThree = 'cooper'; 
	break; 
	 
case 'cooper':  
	visiOne = 'festival'; visiTwo = 'calendar'; visiThree = 'media'; 
	break; 
 
			case 'all':  
				visiOne = 'festival', visiTwo = "media", visiThree = "calendar"; 
				 
				if ($('#'+visiOne).is(":visible")){ 
					$('#'+visiOne).hide().animate({top: '-400px'}, 500); 
				} 
				if ($('#'+visiTwo).is(":visible")){ 
					$('#'+visiTwo).hide().animate({top: '-400px'}, 500); 
				} 
				if ($('#'+visiThree).is(":visible")){ 
					$('#'+visiThree).hide().animate({top: '-400px'}, 500); 
				} 
				$('#menuClose').hide(); 
				break; 
			} 
		if ($('#'+visiOne).is(":visible")){ 
			$('#'+visiOne).hide().animate({top: '-400px'}, 500); 
		} 
		if ($('#'+visiTwo).is(":visible")){ 
			$('#'+visiTwo).hide().animate({top: '-400px'}, 500); 
		} 
		if ($('#'+thisHide).is(":visible")){ 
			$('#'+thisHide).animate({top: '-400px'}, 500, function(){$('#'+thisHide).hide();}); 
		} 
		else { 
			$('#'+thisHide).show().animate({top: '0rem'}, 500); 
		} 
		return false; 
	} 
	$('#artistbtn').click(function(){ 
		mineMenu('festival'); 
		$('#menuClose').show(); 
		$(".rotate-art").toggleClass("down");  
		$(".rotate-media , .rotate-calendar").removeClass("down"); 
	}); 
	 
	$('#mediabtn').click(function(){ 
		mineMenu('media'); 
		$('#menuClose').show(); 
		$(".rotate-media").toggleClass("down"); 
		$(".rotate-art , .rotate-calendar").removeClass("down"); 
	}); 
	 
	$('#calendarbtn').click(function(){ 
		mineMenu('calendar'); 
		$('#menuClose').show(); 
		$(".rotate-calendar").toggleClass("down"); 
		$(".rotate-art , .rotate-media").removeClass("down"); 
	}); 
	$('#menuClose').click(function(){ 
		mineMenu('all'); 
		$(".rotate-media, .rotate-art ,rotate-calendar").removeClass("down"); 
    }); 
});

.header { 
  height: 47px; 
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100%; 
  z-index: 5000; 
  background-color: #191919; 
  /*Opacity start*/ 
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 
  filter: alpha(opacity=80); 
  -moz-opacity: 0.80; 
  -khtml-opacity: 0.8; 
  opacity: 0.8; 
  /*Opacity end*/ 
  font-weight: 400; 
  letter-spacing: 3.4px; 
  text-align: center; 
} 
.header h1 { 
  margin: 0; 
  margin-left: 60px; 
} 
.header h1 a { 
  float: left; 
  line-height: 1.5; 
  width: auto; 
  max-height: 47px; 
  color: #fff; 
} 
.header h1 a img { 
  width: auto; 
  height: 47px; 
} 
.header nav { 
  width: 60%; 
  margin: 0 auto; 
  position: relative; 
  z-index: 5000; 
} 
.header nav .menu { 
  position: relative; 
  display: flex; 
  justify-content: space-around; 
  text-decoration: none; 
  list-style-type: none; 
  margin: 0; 
  height: 47px; 
  line-height: 3; 
} 
.header nav .menu .hide .lang-panel { 
  display: none; 
} 
.header nav .menu .hide .lang-panel ul { 
  display: flex; 
  /* flex-grow: 1; */ 
  width: 100%; 
  list-style-type: none; 
} 
.header nav .menu .hide .lang-panel ul li { 
  flex-grow: 1; 
} 
.header nav .menu li a { 
  text-decoration: none; 
  color: #fff; 
} 
.header nav .menu #artistbtn a .fas { 
  left: 8%; 
  position: absolute; 
  top: 55%; 
  color: #c9ac8c; 
  line-height: 20px; 
  transition: all 0.5s; 
} 
.header nav .menu #mediabtn { 
  position: relative; 
} 
.header nav .menu #mediabtn a .fas { 
  right: 37.5%; 
  position: absolute; 
  top: 55%; 
  color: #c9ac8c; 
  line-height: 20px; 
  transition: all 0.5s; 
} 
.header nav .menu #calendar { 
  position: relative; 
} 
.header nav .menu #calendar a .fas { 
  right: 37.5%; 
  position: absolute; 
  top: 55%; 
  color: #c9ac8c; 
  line-height: 20px; 
  transition: all 0.5s; 
} 
 
.rotate-art { 
  -moz-transition: all, 0.5s, cubic-bezier(0, 0, 1, 1); 
  -webkit-transition: all, 0.5s, cubic-bezier(0, 0, 1, 1); 
  transition: all, 0.5s, cubic-bezier(0, 0, 1, 1); 
  -o-transition: all, 0.5s, cubic-bezier(0, 0, 1, 1); 
} 
 
.rotate-media { 
  -moz-transition: all, 0.5s, cubic-bezier(0, 0, 1, 1); 
  -webkit-transition: all, 0.5s, cubic-bezier(0, 0, 1, 1); 
  transition: all, 0.5s, cubic-bezier(0, 0, 1, 1); 
  -o-transition: all, 0.5s, cubic-bezier(0, 0, 1, 1); 
} 
 
.rotate-calendar { 
  -moz-transition: all, 0.5s, cubic-bezier(0, 0, 1, 1); 
  -webkit-transition: all, 0.5s, cubic-bezier(0, 0, 1, 1); 
  transition: all, 0.5s, cubic-bezier(0, 0, 1, 1); 
  -o-transition: all, 0.5s, cubic-bezier(0, 0, 1, 1); 
} 
 
.rotate-art.down { 
  -webkit-transform: rotate(180deg); 
  -ms-transform: rotate(180deg); 
  transform: rotate(180deg); 
} 
 
.rotate-media.down { 
  -webkit-transform: rotate(180deg); 
  -ms-transform: rotate(180deg); 
  transform: rotate(180deg); 
} 
 
.rotate-calendar.down { 
  -webkit-transform: rotate(180deg); 
  -ms-transform: rotate(180deg); 
  transform: rotate(180deg); 
} 
 
.subMenu ul { 
  display: block; 
} 
 
.subMenu { 
  position: absolute; 
  top: 0; 
  width: 100%; 
  height: 168px; 
  background-color: #191919; 
  /*Opacity start*/ 
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 
  filter: alpha(opacity=80); 
  -moz-opacity: 0.80; 
  -khtml-opacity: 0.8; 
  opacity: 0.8; 
  z-index: 98; 
} 
.subMenu ul { 
  height: 100%; 
  padding-top: 47px; 
  list-style: none; 
  display: flex; 
  margin-left: 24vw; 
} 
.subMenu li { 
  position: relative; 
  float: left; 
  width: 121px; 
  height: 71px; 
  margin-top: 22px; 
  margin-left: 40px; 
  padding: 0px; 
  border-radius: 5px; 
  border: solid 3px #C9AC8C; 
  box-sizing: border-box; 
} 
.subMenu li:first-child { 
  margin-left: 0; 
} 
.subMenu li a { 
  display: flex; 
  flex-wrap: wrap; 
  justify-content: center; 
  width: 102%; 
  height: 102%; 
  margin-top: -1%; 
  margin-left: -1%; 
  text-decoration: none; 
  font-size: 12px; 
  font-weight: bold; 
  letter-spacing: 2.2px; 
  text-align: center; 
  color: #D3D3D3; 
  box-sizing: border-box; 
  cursor: pointer; 
  transition: all 0.3s; 
} 
 
#menuClose { 
  display: none; 
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100vw; 
  height: 100vh; 
  z-index: 97; 
} 
 
#festival, 
#calendar, 
#media { 
  display: none; 
  top: -200px; 
  padding-bottom: 35px; 
  position: fixed; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<link href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" rel="stylesheet"/> 
<header class="header" id="menu"> 
  <nav> 
    <ul class="menu"> 
      <li id="artistbtn"><a href="#">Festival<i class="fas fa-sort-down rotate-art"></i></a></li> 
      <li id="calendarbtn"><a href="#">Calendar<i class="fas fa-sort-down rotate-calendar"></i></a></li> 
      <li><a href="#">Location</a></li> 
      <li id="mediabtn"><a href="javascript:void(0);">Gallery<i class="fas fa-sort-down rotate-media"></i></a></li> 
      <li><a href="#">News</a></li> 
      <li><a href="#">Contacts</a></li> 
    </ul> 
  </nav>     
</header> 
 <!-- submenu dropdown --> 
<div class="subMenu" id="festival"> 
  <ul> 
    <li><a href="javascript:void(0);">Mission</a></li> 
    <li><a href="javascript:void(0);">Characters</a></li> 
    <li><a href="javascript:void(0);">Festival Team</a></li> 
    <li><a href="javascript:void(0);">Volunteers</a></li> 
  </ul> 
</div> 
<div class="subMenu" id="media"> 
  <ul> 
    <li><a href="javascript:void(0);">Mission</a></li> 
    <li><a href="javascript:void(0);">Characters</a></li> 
    <li><a href="javascript:void(0);">Festival Team</a></li> 
    <li><a href="javascript:void(0);">Volunteers</a></li> 
  </ul> 
</div> 
<div class="subMenu" id="calendar"> 
  <ul> 
    <li><a href="javascript:void(0);">Calendar</a></li> 
  </ul> 
</div> 
<div id="menuClose"></div>