Управляйте: до и: после с помощью javascript

function GetData(TheClicked,WhichItem) {
    //In the working version, here is an Ajax call;
    document.getElementById("MainContainer").innerHTML = 'SomeTextSomeTextSomeTextSomeText';
    // The parent ul
    var parent = TheClicked.parentElement.parentElement;
    // De-activate the pointer-events
    parent.style['pointer-events'] = 'none';
    // Re-activate the pointer-events after 100ms
    setTimeout(function() {
        parent.style['pointer-events'] = '';
    }, 100);
}

body {
	margin: 0;
	padding: 0;
	background: #fcf8f2;
}
.NavBarContainer {
	position: block;
  clear: both;
	top: 0;
	width: 100%;
	background: #4a535b;
}
.NavBar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.NavBar ul li {
	display: block;
	position: relative;
	float: left;
}
.NavBar li ul { display: none; }

.NavBar ul li a {
	display: block;
	padding: 0.6rem;
	text-decoration: none;
	white-space: nowrap;
	color: #fffbf4;
	font-size:1.2rem;
	letter-spacing:0.1rem;
	-webkit-animation: fadeIn 1s;
	animation: fadeIn 1s;
}

.NavBar ul li a:hover { 
	background: #2c3e50; 
	-webkit-transition: background-color 0.5s ease-out;
	-moz-transition: background-color 0.5s ease-out;
	-o-transition: background-color 0.5s ease-out;
	transition: background-color 0.5s ease-out;
}
.NavBar li:hover > ul {
	display: block;
	position: absolute;
}

.NavBar li:hover li { float: none; }

.NavBar li:hover a { background: #4a535b; }

.NavBar li:hover li a:hover { background: #2c3e50; }

.NavBar li ul li { border-top: 0; }
.NavBar ul ul ul {
	left: 100%;
  top: 0;
}

.NavBar ul:before,
.NavBar ul:after {
	content: " "; /* 1 */
	display: table; /* 2 */
}
.NavBar ul:after { clear: both; }

.MainContainer {
	background: #fffcf9;
	margin: auto;
	width: 80%;
	border-style:solid;
	border-width:thin;
	border-color:#e2e0d9;
	padding:1rem;
  color: red;
}

<div class = "NavBarContainer" id = "NavBarContainer">
<div class = "NavBar">
  <ul>
    <li><a href = "#">Item#1</a>
      <ul>
        <li><a href = "#" onclick = "GetData(this,'SubItem_11');">SubItem_11</a></li>
        <li><a href = "#" onclick = "GetData(this,'SubItem_12'); return false;">SubItem_12</a></li>
        <li><a href = "#" onclick = "GetData(this,'SubItem_13'); return false;">SubItem_13</a></li>
      </ul>
    </li>
		<li><a href = "#">Item#2</a>
      <ul>
        <li><a href = "#" onclick = "GetData(this,'SubItem_21'); return false;">SubItem_21</a></li>
        <li><a href = "#" onclick = "GetData(this,'SubItem_22'); return false;">SubItem_22</a></li>
        <li><a href = "#" onclick = "GetData(this,'SubItem_23'); return false;">SubItem_23</a></li>
      </ul>   
		</li> 
		<li><a href = "#">Item#3</a>
      <ul>
        <li><a href = "#" onclick = "GetData(this,'SubItem_31');">SubItem_31</a></li>
        <li><a href = "#" onclick = "GetData(this,'SubItem_32');">SubItem_32</a></li>
        <li><a href = "#" onclick = "GetData(this,'SubItem_33');">SubItem_33</a></li>
      </ul>   
		</li>     
  </ul>     
</div>
</div>


<div class = "MainContainer" id = "MainContainer">...</div>