использования 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;} 
    ... 
}