使用CSS来改变横向菜单是为移动设备

Question

我有这样的HTML我水平CSS菜单响应菜单：

<div id="cssmenu"> 
    <ul> 
     <li><a href="#"><span>Homepage</span></a></li> 
     <li><a href="#"><span>Services</span></a> 
      <ul> 
       <li><a href="#"><span>LINK</span></a></li> 
      </ul> 
     </li> 
     <li><a href="#"><span>Projects</span></a></li> 
     <li><a href="#"><span>Contact Us</span></a></li> 
    </ul> 
</div> 

最新最好的方式来使用CSS来使它成为一个下拉菜单（如：http://responsive-nav.com/）页面变小时。

我已经使这个菜单消失，当页面变得太小使用媒体查询，但我想用CSS来改变它像菜单（上面的链接），并保持相同的HTML。

这里是完整的代码小提琴：http://jsfiddle.net/auBpX/

Answer 1

你的媒体查询应该覆盖默认样式，以便让他们在你的CSS的底部而非顶部。

我不打算编码整个事情，但this fiddle可能会让你开始。

@media screen and (max-width: 520px) { 
    #cssmenu {height:10px; overflow:hidden;} 
    #cssmenu:hover {height:auto; overflow:none;} 
    #cssmenu li {display:block; width:100%; float:none;} 
    ... 
}