Menú adaptable en CSS para versión móvil y tablet (gratis)

<style>
/* Navigation ----------------------------------------------- */
#menuatas {
    color:#474747;
    background:#F1F1F1;
    padding:3px 0;
    border-bottom:1px solid #CCC
}
#menuatas a:hover {
    text-decoration:none
}
#ktuskrg {
    display:inline-block;
    height:18px;
    float:left;
    line-height:18px;
    padding:0 10px;
    border-right:1px solid #ACACAC
}
#navtop {
    display:inline-block;
    margin-left:5px
}
#navtop ul, #navtop li {
    padding:0;
    margin:0;
    list-style:none
}
#navtop li {
    float:left;
    height:18px;
    position:relative
}
#navtop li a {
    height:18px;
    padding:0 10px;
    line-height:18px;
    display:block
}
#navtop li.dgnsubtop {
    padding-right:10px;
    background-image:url(http://4.bp.blogspot.com/-NTKXiugkHrs/UIeVQmEzDjI/AAAAAAAAGJ4/G92p5n8hgvY/s7/downarrow-dark.png);
    background-repeat:no-repeat;
    background-position:90% 50%
}
#navtop ul.sub-menu-top {
    display:none;
    position:absolute;
    width:140px;
    background:#F1F1F1;
    top:23px;
    -webkit-box-shadow:0 3px 4px 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow:0 3px 4px 1px rgba(0, 0, 0, 0.2);
    box-shadow:0 3px 4px 1px rgba(0, 0, 0, 0.2);
    z-index:2
}
#navtop ul.sub-menu-top.hidden {
    display:block;
    -khtml-opacity:0;
    -moz-opacity:0;
    opacity:0;
    visibility:hidden;
    -webkit-transition:all 0.5s ease 0s;
    -o-transition:all 0.5s ease 0s;
    transition:all 0.5s ease 0s;
    -moz-transition:all 0.5s ease 0s
}
#navtop li:hover ul.sub-menu-top.hidden {
    -khtml-opacity:1;
    -moz-opacity:1;
    opacity:1;
    visibility:visible
}
#navtop ul.sub-menu-top li {
    width:100%;
    height:22px;
    border-bottom:1px solid white;
    border-top:1px solid lightGrey
}
#navtop ul.sub-menu-top li:first-child {
    border-top:0 none
}
#navtop ul.sub-menu-top a:hover {
    padding-left:15px
}
input {
    font-family:arial, sans-serif
}
.FollowByEmail .follow-by-email-inner::-webkit-input-placeholder, .FollowByEmail .follow-by-email-inner input:-moz-placeholder {
    font-size:13px;
    font-family:arial, sans-serif;
    color:#999
}



 #menu {
     background-image:url(http://4.bp.blogspot.com/-Qfv2CUXkZQE/UJOrNu3iNAI/AAAAAAAAGc8/wvy8sCPa8HA/s1600/main-menu-bg.png);
     background-repeat:repeat-x;
     height:55px;
     border-bottom:5px solid #A00F0F;
     padding:0
 }
 #menu ul, #menu li {
     margin:0;
     margin-top:5px;
     padding:0 0;
     list-style:none
 }
 #menu ul {
     height:45px;
     width:100%
 }
 #menu li {
     float:left;
     display:inline;
     position:relative;
     font:normal normal 11px Verdana, Geneva, sans-serif
 }
 #menu a {
     display:block;
     line-height:40px;
     padding:0 14px;
     text-decoration:none;
     color:#FFF
 }
 #menu li a:hover {
     color:#E4E4E4;
     -webkit-transition:all .1s ease-in-out;
     -moz-transition:all .1s ease-in-out;
     -ms-transition:all .1s ease-in-out;
     -o-transition:all .1s ease-in-out;
     transition:all .1s ease-in-out;
     background:#383838
 }
 #menu input {
     display:none;
     width:100%;
     height:100%;
     opacity:50;
     cursor:pointer
 }
 #menu label {
     font:bold 30px Arial;
     display:none;
     width:35px;
     height:36px;
     line-height:36px;
     text-align:center;
     margin-top:7px
 }
 #menu label span {
     font-size:18px;
     width:100px;
     height:45px;
     position:absolute;
     left:35px
 }
 #menu ul.menus {
     height:auto;
     overflow:hidden;
     width:170px;
     background:#5A77A0;
     position:absolute;
     z-index:99;
     display:none
 }
 #menu ul.menus li {
     display:block;
     width:100%;
     font:bold 11px Arial;
     text-transform:none;
     text-shadow:none;
     border-bottom:1px dashed #31AFDB
 }
 #menu ul.menus a {
     color:#FFF;
     line-height:35px
 }
 #menu li:hover ul.menus {
     display:block
 }
 #menu ul.menus a:hover {
     background:#5FC6EB;
     color:#FFF;
     -webkit-transition:all .1s ease-in-out;
     -moz-transition:all .1s ease-in-out;
     -ms-transition:all .1s ease-in-out;
     -o-transition:all .1s ease-in-out;
     transition:all .1s ease-in-out
 }
 [MENTION=16931]medi[/MENTION]a screen and (max-width: 800px) {
     #menu {
         position:relative
     }
     #menu ul {
         background:#111;
         position:absolute;
         top:100%;
         right:0;
         left:0;
         z-index:3;
         height:auto;
         display:none
     }
     #menu ul.menus {
         width:100%;
         position:static;
         padding-left:20px
     }
     #menu li {
         display:block;
         float:none;
         width:auto;
         font:normal 11px Arial
     }
     #menu input, #menu label {
         position:absolute;
         top:0;
         left:0;
         display:block
     }
     #menu input {
         z-index:4
     }
     #menu input:checked+label {
         color:white
     }
     #menu input:checked~ul {
         display:block
     }
 }



       
body {
	background-color: #006600;
}
</style>


<nav id='menu'>
<div class='checkbox'></div>
<input type='checkbox'/>
<label>≡<span>Ir al Menú</span></label>

<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>Terminos y Condiciones</a></li>
<li><a href='#'>Politicas de Privacidad</a></li>
<li><a href='#'>Cookies</a></li>
<li><a href='#'>Acerca de</a></li>
</ul>
</nav>