Question

我想开发一个适合移动和响应（即下拉列表）的菜单栏，最大宽度为500px。任何人都可以帮我这个吗？

提前致谢！

＆＃13;

#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;

}

＆＃13;

<!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>

＆＃13;

Answer 1

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

移动菜单栏

1 个答案: