使用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;} 
    ... 
}