Mam sobie taki kod CSS, tyle, że nie bardzo wiem jak przerobić to aby menu było responsywne. Najlepiej by się zwijało w te 3 taki paski. To, że wykorzystać media-queries to wiem, ale jak to wykorzystać już aby schować statyczne menu i stworzyć mobilne to już niestety nie wiem.
/*Menu*/
#menu, #menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu {
width: 100%;
border: 1px solid #222;
background: #111 linear-gradient(#444, #111);
box-shadow: 0 1px 1px #777;
}
#menu:before,
#menu:after {
content: "";
display: table;
}
#menu:after {
clear: both;
}
#menu {
zoom:1;
}
#menu li {
float: left;
border-right: 1px solid #222;
box-shadow: 1px 0 0 #444;
position: relative;
}
#menu a {
float: left;
padding: 12px 30px;
color: #999;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
transition-duration: 300ms;
}
#menu li:hover > a {
color: #fafafa;
background-color: #ff9a12;
}
*html #menu li a:hover { /* IE6 only */
color: #fafafa;
}