有人可以帮我将以下内容转换为移动设备的菜单栏，我已经尝试了很长时间。我希望它是 500px 并且尽可能不使用 bootstrap，或者如果有人可以指出正确的方向。
提前致谢
#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>再次感谢您的帮助。
最佳答案
您好，看来您需要一些 media queries .媒体查询允许您根据显示网站的屏幕宽度指定特定的 css。您可以像这样向您的 css 添加一个 500px 的媒体查询:
@media (max-width: 500px){
//CSS to be applied to your website when being viewed on screen widths of 500px
}
如果您有任何问题，请告诉我。
关于html - css中的移动菜单栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34244691/