响应式侧面导航与下拉

Question

我有一个菜单编码：

https://jsfiddle.net/cssL313k/1/

<img onclick="Nav_open()" id="MobileMenu" src="http://lorempixel.com/50/50/" />

        <nav id="MobileNavigation" style="display: none">
            <ul>
                <li><a href="javascript:void(0)" class="Close" onclick="Nav_close()">Close X</a></li>
                <li><a href="#">Sign In</a></li>
                <li><a href="#">Register</a></li>
                <li><a href="#">My Account</a></li>
                <li><a href="#">Services</a></li>
            </ul>
        </nav>

         <script>
            function Nav_open() {
                document.getElementById("MobileNavigation").style.display =       "block";
            }
            function Nav_close() {
                document.getElementById("MobileNavigation").style.display = "none";
            }
        </script>

当您点击其下方的“服务”时，我需要显示另一个菜单，然后在再次点击“服务”时离开。

我吮吸javascript，我无法通过谷歌找到我需要的东西，所以任何人都有想法？