I'm currently working on a horizontal menu using CSS and JavaScript with multiple levels. I've implemented a toggle function to show the submenu container, but it's causing the links below it to be pushed down. Is there a way to make the displayed div container appear beneath the other links when clicked? Additionally, I'd like to restrict only one link to be selected, but I'm not sure how to achieve that. I have limited experience with JavaScript and CSS so any help would be appreciated.
Most of the styling has been removed from my code for clarity, but here is the basic functionality:
#togglebox {
display:none;
}
#togglebox li{
display: inline-block;
}
#extrabox {
display:none;
background: #E6ECF2;
text-align: center;
min-width: 100%;
}
#extrabox li{
display: inline-block;
}
#extrabox2 {
display:none;
background: #E6ECF2;
text-align: center;
min-width: 100%;
}
#extrabox2 li{
display: inline-block;
}
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
<ul class="sub-menu" style="display:inline;">
<a href="#"><li id="NSM1">Normal Sub Menu</li></a></td>
<a href="#" onclick="toggle_visibility('togglebox');"><li id="SMEL">Sub-menu Item with Second Level</li></a>
<a href="#"><li id="NSM2">Normal Sub Menu</li></a>
<br />
</ul>
<div id="togglebox">
<a href="#"><li id="NSSL1">[Normal Link]</li></a>
<a href="#" onclick="toggle_visibility('extrabox');"><li id="SSL2">[Has extra Level]</li></a>
<div id="extrabox">
<a href="#"><li id="sublinkea">3rd level item1</li></a>
<a href="#"><li id="sublinkeb">3rd level item2</li></a>
<a href="#"><li id="sublinkea">3rd level item3</li></a>
<a href="#"><li id="sublinkeb">3rd level item4</li></a>
</div>
<a href="#" onclick="toggle_visibility('extrabox2');"><li id="SSL3"><li id="sublinksc">[Has Extra Level]</li></a>
<div id="extrabox2">
<a href="#"><li id="sublinkea">3rd level item1</li></a>
<a href="#"><li id="sublinkeb">3rd level item2</li></a>
<a href="#"><li id="sublinkea">3rd level item3</li></a>
<a href="#"><li id="sublinkeb">3rd level item4</li></a>
</div>
<a href="#"><li id="NSSL2">[Normal Link]</li></a>
</div>