<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<style>
html{margin:0px;padding:0px;}
body{margin:0px;padding:0px;box-sizing: border-box;
}
.navigation-bar{
display:block;width:100%;position:fixed;background-color:rgba(55,55,55,1);
color:white;box-sizing: border-box;margin:0px auto;text-align: center;padding:0px;
}
.navigation-list li{display:inline-block;max-width:180px;margin-right:auto;list-style-type: none;padding:10px;position:relative;font-size:25px;border-bottom:0px solid white; transition:border-bottom 0.3s;
}
.navigation-list li:hover{border-bottom:2px solid white;
}
.navigation-list li:after{margin:auto; content:"";width:0%;height:3px;display:block;background:transparent;transition:width 0.5s,background-color 0.5s
}
.navigation-list li:hover:after{width:100%;background-color: aqua;
}
.nav{background-color: black;width:500px;display:block;position: relative;}
@media only screen and(max-width:520px){
.navigation-bar{top:0px;left:0px;width:200px;}
}
</style>
</head>
<body>
<div class="navigation-bar">
<ul class="navigation-list">
<li>Home</li>
<li>Directory</li>
<li>PlacesToExplore</li>
<li>Services</li>
<li>NearestPlaces</li>
</ul>
</div>
</body>
此页面中的媒体查询不起作用，但它们在同一浏览器中的其他页面中工作。当浏览器调整大小低于520px时，我希望导航栏位于左侧。
媒体查询工作正常。在css中的问题，你可以指定每个li像块一样。
@media (max-width:520px){
.navigation-list li{
display: block;
}
}