在链接点击上隐藏响应式菜单

Question

我正在尝试创建一个响应式移动导航菜单。

我在试图弄清楚如何做所有事情时遇到了一些问题。

在点击链接后，想知道如何隐藏我的自适应下拉菜单。

另外，我如何设计它，以便当它是一个全尺寸的网站时，菜单项在屏幕的右上方显示为彼此？

#NavBar {
    position: fixed;
    margin: 0 auto;
    padding: 0;
    top: 0;
    width: 100%;
    color: #fff;
    background-color: #3498db;
    z-index: 1;
}

/*Create a horizontal list with spacing*/

li {
    list-style-type: none;
    height: 40px;
}

/*Style for menu links*/

li a {
    height: 50px;
    text-align: center;
    color: #fff;
    text-decoration: none;
}

/*Style 'show menu' label button and hide it by default*/

.show-menu {
    text-align: center;
    padding: 10px 0;
    display: none;
}

/*Hide checkbox*/

input[type=checkbox] {
    display: none;
}

/*Show menu when invisible checkbox is checked*/

input[type=checkbox]:checked ~ #menu {
    display: block;
}


@media screen and (max-width: 760px) {
    /*Make dropdown links appear inline*/
    ul {
        /*        position: static;*/
        display: none;
    }

    /*Display 'show menu' link*/
    .show-menu {
        display: block;
    }
}

<div id="NavBar">
    <label for="show-menu" class="show-menu">Show Menu</label>
    <input type="checkbox" id="show-menu" role="button">
    <ul id="menu">
        <li><a href="#Home" class="item">Home</a></li>
        <li><a href="#AboutUs" class="item">About Us</a></li>
        <li><a href="#Gallery" class="item">Gallery</a></li>
        <li><a href="#ContactUs" class="item">Contact Us</a></li>
    </ul>
</div>