Trying to use position:absolute or relative in this scenario won't be effective as it will cause the menu to overlap with the buttons.
Instead, I have transferred most of the styling from the <li> elements to the <a> elements. This allows the <li> to expand with the subMenu and keeps the height (and green background) of the <a> unaffected.
I attempted to simplify the JavaScript and CSS by moving some style that was manipulated by JavaScript back into the CSS. I also updated the code to use the newer .on('click') syntax and utilized an HTML data attribute to connect the <a> to the button, eliminating the need to constantly find elements.
// Avoid repetitive search using jQuery
var menuAnchors = $('#menu > li > a'); // store top level anchors
var buttons = $("input[id^='B5_']"); // store all buttons
// Create a single click handler for all #menu > li > a
$('#menu').on('click', '> li > a', function() {
menuAnchors.css('background-color', ''); // reset red to green
this.style.backgroundColor = 'red'; // set anchor elements to red background when clicked
$(".subMenu").hide().reset(); // hide all subMenu items
$(this).next(".subMenu").toggle("slow", function() {}); // display the nearest next subMenu
});
// Create a single click handler for all .subMenu anchors
$('.subMenu').on('click', function(e) {
$(this).reset();
e.target.style.backgroundColor = 'red'; // set target anchor to red
var buttonId = $(e.target).data('button'); // retrieve buttonId from data attribute
$('#' + buttonId).show();
});
// Custom function to hide buttons and reset background to orange
$.fn.reset = function() {
buttons.hide(); // hide all buttons
$(this).find('a').css('background-color', ''); // reset red to orange
return $(this);
}
body {
background-color: #3e8cbd;
}
ul {
display: flex;
list-style-type: none;
padding: 0;
}
#menu li {
width: 10em;
color: white;
text-align: center;
}
#menu li a {
display: block;
padding: 14px 16px;
cursor: pointer;
background-color: green;
border-right: 1px solid #bbb;
border-top: 1px solid #bbb;
}
#menu li:last-child a {
border-right: none;
}
.subMenu {
flex-direction: column;
padding: 0;
display: none;
}
#menu .subMenu a {
background-color: orange;
}
#B5 input {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu">
<li>
<a class="menuLink">Menu1</a>
<ul class="subMenu">
<li><a data-button="B5_1">Sub-Menu1-1</a></li>
<li><a data-button="B5_2">Sub-Menu1-2</a></li>
</ul>
</li>
<li>
<a class="menuLink">Menu2</a>
<ul class="subMenu">
<li><a data-button="B5_3">Sub-Menu2-1</a></li>
<li><a data-button="B5_4">Sub-Menu2-2</a></li>
<li><a data-button="B5_5">Sub-Menu2-3</a></li>
</ul>
</li>
<li>
<a class="menuLink" onClick="alert('Development of the Menu3 functionalities postponed!')">Menu3</a>
</li>
</ul>
<table id="B5">
<tr>
<td>
<input id="B5_1" type="button" value="Button1" onClick="alert('Action 1')">
</td>
<td>
<input id="B5_2" type="button" value="Button2" onClick="alert('Action 2')">
</td>
<td>
<input id="B5_3" type="button" value="Button3" onClick="alert('Action 3')">
</td>
<td>
<input id="B5_4" type="button" value="Button4" onClick="alert('Action 4')">
</td>
<td>
<input id="B5_5" type="button" value="Button5" onClick="alert('Action 5')">
</td>
</tr>
</table>