html - 对div的响应高度？

Question

http://shrineweb.in/other-files/clients/markalves21/responsive/html/index.html

在上面的链接中，蓝色导航在宽度上是响应式的，但在高度上不是。我不知道我做错了什么，我已经设置了最小高度。

这是标记:

<div id="menu">

<!--the navigation/menu-->
<nav>
    <ul><!--un-ordered list with list items and child list items if the menuis to have a drop down-->
    <li><a href="index.html">Home</a></li>
        <li><a href="aboutus.html">About Us</a>
        <ul>
        <li><a href="location.html">Location</a></li><!--child menu-->
        </ul>
        </li>
    <li><a href="contactus.html">Contact Us</a></li>
    <li>News
    <ul>
    <li><a href="clubnews.html">Club News</a></li>
    </ul>
    </li>
    <li>The Pitch
    <ul>
    <li><a href="plan.html">Plan</a></li>
    <li><a href="location.html">Location</a></li>
    </ul>
    </li>
    <li>Teams
    <ul>
    <li><a href="under15.html">Under 15</a></li>
    <li><a href="under16.html">Under 16</a></li>
    <li><a href="under18.html">Under 18</a></li>
    </ul>
    </li>
    <li>Matches
    <ul>
    <li><a href="fixtures.html">Fixtures</a></li>
    <li><a href="tables.html">Tables</a></li>
    <li><a href="results.html">Results</a></li>
    </ul>
    </li>
    <li>Help
    <ul>
    <li><a href="askaq.html">Ask a Question</a></li>
    <li><a href="faq.html">FAQ's</a></li>
    </ul>
    </li>
    </ul>
</nav>

</div>

这是CSS:

@media screen and (min-width: 1px) and (max-width: 2000px) {
#header {
width: 100%;
}
#header img {
width: 100%;
}
#menu {
color: #fff;
background: #4E84FE;
margin: 0px auto;
width: 100%;
min-height: 43px;
}
}

Answer 1

将以下 CSS 属性添加到#menu

overflow: hidden;
height: auto;

请注意，您可能希望在下拉菜单周围添加细白边框或调整蓝色阴影，因为它开始与菜单栏的第二行融为一体。另一种选择是使用媒体查询将您写出的菜单转换为下拉菜单或其他形式的适用于小屏幕的移动友好菜单。

此外，我建议将这些样式应用为类而不是 id 的 (.menu)。处理这种事情才是正确的做法。