多级下拉Div定位

所以我试图用CSS和JavaScript制作一个多层次的水平菜单。我有一个toggle函数，它显示子菜单的div容器，但是，当它显示时，它会将链接推到容器下面。我怎样才能使它，所以当我单击链接，以显示一个div容器，它出现在下面的其余链接。此外，我想使它只有一个链接可以选择，我不知道如何做到这一点。我以前从未使用过JavaScript，对CSS还是个新手。

我已经从代码中删除了几乎所有的样式。但这是功能。

    #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>
            </div>