HTML / CSS更改下拉导航到标题右上角的菜单

Question

我正在尝试使用媒体查询，以便在500px以上时，我的导航仅显示在右上方标题部分（无背景）菜单类中的3个项目中。

汉堡导航在500px以下可以正常工作，但是在上方则卡在了页面的左侧，并且不会在线显示，甚至不会改变背景颜色。

有什么建议吗？

实时页面托管在此处 。 回购在这里 。

Answer 1

 /* Explicitly add the particular section of code outside media query */ div#nav{ background-color : #dddddd; width : 100%; } div#nav *{ display : inline-block; } @media (min-width: 1000px) { div#nav{ background-color : #dddddd; width : 100%; } div#nav *{ display : inline-block; } } 

 <div id="nav"> <nav class="dropdown-content"> <a href="#" class="menu">Why Clarity</a> <p class="divider"> | </p> <a href="#" class="menu">Benefits</a> <p class="divider"> | </p> <a href="#" class="menu">Diversity</a> </nav> </div>