>>>ВОПРОСЫ НОВИЧКОВ<<<

<nav id="mobile">

    <div id="toggle-bar">
        <strong><a class="mtoggle" href="#">MAIN MENU</a></strong>
        <a class="navicon mtoggle" href="#">MAIN MENU</a>
    </div>

    <ul id="mmenu">
        <li><a href="#">Home</a></li>
        <li><a href="#">Products</a>
            <ul>
                <li><a href="#">HTML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">Javascript</a>
                    <ul>
                        <li><a href="#">jQuery</a></li>
                        <li><a href="#">MooTools</a></li>
                    </ul>
            </li>
            </ul>
        </li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>       
    </ul>

</nav>

<script type="text/javascript">
jQuery(document).ready(function($) {
    $("#mmenu").hide();
    $(".mtoggle").click(function() {
        $("#mmenu").slideToggle(500);
    });
});
</script>

@media screen and (max-width: 960px) {
#nav#full {
display:none
}

nav#mobile {
background-color:#111;
box-shadow: 0 0 3px 2px rgba(0,0,0,0.3);
display:block;
}

/*
Top black bar that holds the toggle button
*/

nav#mobile #toggle-bar {
line-height:70px;
height:70px;
}

/*
Toggle button #1 ("Menu")
*/

nav#mobile strong a {
margin-left:30px;
border:1px solid #444;
padding:10px;
}

/*
Toggle button #2 ("Navicon")
*/

nav#mobile .navicon {
float: right;
height: 6px;
width: 34px;
margin: 20px;
border-top: 18px double #FFF;
border-bottom: 6px solid #FFF;
font-size:0;
}

/*
The dropdown menu
*/

nav#mobile ul li {
clear:both;
list-style:none;
}

nav#mobile ul li a {
display:block;
background-color:#300;
text-transform:uppercase;
letter-spacing:.2em;
margin:2px 0;
padding:6px 0 6px 8px;
}

nav#mobile ul ul {
font-size:small;
}

nav#mobile ul ul li {
margin-left:30px;
}

nav#mobile ul ul a {
background-color:#333;
padding-left:8px;
}

nav#mobile ul ul a:before {
content: "2192";
padding-right:8px;
}
}