移动菜单栏答案

【问题标题】：Mobile menu bar移动菜单栏
【发布时间】：2015-12-12 00:14:01
【问题描述】：

我想开发一个适合移动和响应式的菜单栏（即下拉菜单），最大宽度为 500 像素。有人可以帮我解决这个问题吗？

提前致谢！

#menu {
    width: 21.4vw;
    font-family: Tahoma, Geneva, sans-serif;
    font-weight: normal;
     font-size: 1vw;
    text-align: left;
    margin-left: 1vw;
    background-color: #CA2A2A;
        border-radius: 0px;
        max-width: 96vw;

}
#menu ul {
    height: auto;
    padding: 0.5vw 0vw;
    margin: 0px;
}
#menu li {
    display: block;

}
#menu a {
    text-decoration: none;
    color: #FFFFFF;
    padding: 0.5vw 0.5vw 0.5vw 0.5vw;
    font-size: 3vw;
    display:block;

}
#menu a:hover {
    color: #000000;
    background-color: #FFFFFF;

}

<!DOCTYPE html>
<html>
  <head>
    </head>
  <body>
<div id="menu">
<ul>
<li><a href="website.html">Home</a></li>
<li><a href="breakingnews.html">Breaking News</a></li>
<li><a href="Sport.html">Sport</a></li>
<li><a href="Hulltoday.html">Hull Today</a></li>
<li><a href="Property.html">Property</a></li>
<li><a href="Social.html">Social Media</a></li>
<li><a href="Music.html">Music</a></li>
<li><a href="Reviews.html">Reviews</a></li>
<li><a href="Movies.html">Movies</a></li>
<li><a href="Weather.html">Weather</a></li>
</ul>
</div>

  </body>
  </html>

【问题讨论】：

您忘记了第一个链接后的结束标记。除此之外，您还想达到什么目标？
好的，我希望菜单对移动设备更友好，使其看起来像应用程序中的大多数菜单
@HarryWhite 使用 bootsrap 导航。它真的很简单 - getbootstrap.com/examples/navbar
我想尽可能远离引导程序

标签： html css mobile menu responsive-design

【解决方案1】：

给菜单max-width: 500px; width: 100%

【讨论】：