Javascript 如何将导航ul列表显示为选择列表

我正忙着开发一个快速响应的mobile first站点，其中一个要求是显示主导航（nav>ul>li），就像它是移动视图的标签一样。我以前使用javascript在点击时显示它，或者只是根据客户机将其内联显示，但以前没有这个要求，所以我想知道是否有一种CSS方法可以让

像

标记一样显示它。对于桌面视图，它只会以内联方式正常显示。
您需要为nav设置单独的元素，并选择如下所示

<select id="mobileNav">
    <option>your links</option>
</select>

谢谢，伙计们，这似乎很有效。我认为如果他们将其添加到CSS3规范中，您可以将其显示为一个，那将是很酷的，因为我注意到一些网站正在这样做，我们已经将其显示为表，等等。尽管如此，这非常有效。非常感谢！
<nav>
<ul>
<li>links</li>
</ul>
</nav>

@media (max-width: 480px) {
   nav {
   display: none;
  }
   select#mobileNav {
    display: block;
  }
}

@media (min-width: 481px) {
   select#mobileNav {
     display: none;
   }
      nav {
     display: block;
   }
}