Uno de los elementos que encontramos constantemente en los sitios adaptables a dispositivos es la "navegación", son bastante recomendable usarlos cuando tenemos demasiadas paginas dentro de un sitio. En este post aprenderás a realizar un menú desplegable con HTML , CSS y Jquery.
Antes de realizar esto deberías checar el post anterior del menú básico ya que es la base para este tipo de menú.
Puedes hacer uso de editores de texto como los siguientes:
Este código va dentro de una archivo con extensión .HTML

<!DOCTYPE html>
<html lang="es">
<head>
 <meta charset="UTF-8">
 <title>Menu en HTML</title>
 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 <link rel="stylesheet" href="estilos/menu.css">
 <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
    <header>
        <input type="checkbox" id="btnMenu">
        <label for="btnMenu"><span><img src="Imagenes/icon-menu.png" width="40px" height="40px" alt="Menu"></span></label>
  <nav class="menu">
   <ul>
    <li><a href="#">Item 1</a></li>
    <li class="subMenu"><a href="#">Item 2</a><span><img src="Imagenes/icon_flecha_abajo.png" width="15px" height="15px"></span>
    <ul>
        <li><a href="#">Sub Item 1</a></li>
        <li><a href="#">Sub Item 2</a></li>
        <li><a href="#">Sub Item 3</a></li>
        <li><a href="#">Sub Item 4</a></li>
        <li><a href="#">Sub Item 5</a></li>
    </ul>
    </li>
    <li><a href="#">Item 3</a></li>
    <li class="subMenu"><a href="#">Item 4</a><span><img src="Imagenes/icon_flecha_abajo.png" width="15px" height="15px"></span>
        <ul>
            <li><a href="#">Sub-Item 1</a></li>
            <li><a href="#">Sub-Item 2</a></li>
            <li><a href="#">Sub-Item 3</a></li>
            <li><a href="#">Sub-Item 4</a></li>
            <li><a href="#">Sub-Item 5</a></li>
        </ul>
    </li>
    <li><a href="#">Item 5</a></li>
    <li class="subMenu"><a href="#">Item 6</a><span><img src="Imagenes/icon_flecha_abajo.png" width="15px" height="15px"></span>
        <ul>
            <li><a href="#">Sub Item 1</a></li>
            <li><a href="#">Sub Item 2</a></li>
            <li><a href="#">Sub Item 3</a></li>
            <li><a href="#">Sub Item 4</a></li>
            <li><a href="#">Sub Item 5</a></li>
        </ul>
    </li>
   </ul>
  </nav>
 </header>
 <main>
     <h1>Menu Responsive en HTML y CSS</h1>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, sequi, placeat. Labore officia, harum! Nemo fugit esse minima, placeat ullam rem illo consequatur expedita cupiditate explicabo dolor, accusamus tempora porro.</p>
     <p>Blanditiis magni quo consequatur ipsum veniam hic pariatur omnis, laudantium similique quam nesciunt beatae sit illum sint amet, fugiat atque tempora nobis. Quod vel deserunt aliquid culpa neque asperiores doloribus!</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, magnam! Dolorem maxime iure, hic cumque minus vero veniam neque odio dolore eligendi, eum facere reprehenderit, autem modi atque sit cum.</p>
     <p>Minima modi nobis neque pariatur officiis. Facilis expedita soluta animi beatae eligendi nihil vero laboriosam nisi, illum, earum accusamus ipsa aperiam dolores praesentium labore reiciendis quisquam nemo qui laborum facere.</p>
     <p>Ea magnam ab numquam alias, quasi, blanditiis nulla debitis consectetur aliquid quod facere iusto repellat quisquam voluptate quo culpa, iste ex placeat saepe commodi pariatur quidem officia distinctio fuga! Harum!</p>
     <p>Velit incidunt excepturi temporibus voluptatem reiciendis, suscipit ipsam saepe possimus commodi quod, at distinctio ut porro molestiae quia alias et, amet nostrum placeat repellendus, modi praesentium quasi ducimus. Repellendus, eaque.</p>
     <p>Deserunt blanditiis asperiores inventore corporis voluptates consequatur possimus rem enim dignissimos dolor et, excepturi commodi quidem, ipsam saepe quisquam mollitia fugit! Delectus labore, eius esse sapiente. Tenetur enim, quasi esse.</p>
     <p>Ullam nihil cum reprehenderit earum soluta, minus magni dolor accusamus harum aliquid. Ducimus esse sequi expedita consectetur similique, blanditiis, neque perferendis aliquam, ipsam architecto consequuntur. Deleniti, debitis recusandae modi accusantium.</p>
 </main>
 <script src="subMenu.js"></script>
</body>
</html>

Estilos CSS
Este código va dentro de la carpeta de estilos CSS

* {
 padding:0;
 margin:0;
 box-sizing: border-box;
}

body {
    background-image: url(../Imagenes/fondo.jpg);
    background-size: 100vw 100vh;
    background-attachment: fixed;
}

header {
 width: 100%;
    background: #4E94AB;
    position: fixed;
    top: 0;
    transition: all 1s;
}

#btnMenu {
    display: none;
}

header label {
    display: none;
}

.menu {
    transition: all 1s;
}

.menu ul {
    list-style: none;
    display: flex;
}

.menu ul ul {
    display: none;
}

.menu li {
    padding: 10px;
    text-align: center;
    border-right: 1px solid #FFF;
    flex-grow: 1;
}

.menu ul li span {
    float: right;
    padding-right: 15px;
}

.menu ul ul {
    margin-top: 10px;
}

.menu ul ul li {
    border: none;
    border-top: 1px solid #FFF;
}

.menu ul .subMenu:hover ul {
    display: block;
    position: absolute;
    background: #4E94AB;
    flex-grow: 1;
    border: none;
}

.menu li:hover {
 background: rgba(0,0,0,0.5);
}

.menu a {
    color: #FFF;
    text-decoration: none;
    padding: 10px 30px;
}

main {
    width: 95%;
    background: rgba(0,0,0,0.5);
    color: #FFF;
    margin: auto;
    max-width: 1000px;
    padding: 20px;
    margin-top: 50px;
}

@media (max-width: 768px) {

 header {
  width: 100%;
  position: fixed;
        top: 0;
        height: 50px;
 }
    
    header label {
        display: block;
        float: right;
        padding: 7px;
        margin-right: 20px;
    }
    
    header label img {
        cursor: pointer;
        transition: all 1s;
    }
    
    header label img:hover {
        border-radius: 50%;
    }
    
    .menu {
        background: #E6344A;
        position: absolute;
        top: 50px;
        overflow: scroll;
        width: 50%;
        height: calc(100vh - 60px);
        transform: translateX(-100%);
        transition: all 1s;
    }
    
    .menu ul {
        flex-direction: column;
    }
    
    .menu li {
        border: none;
        border-top: 1px solid #FFF;
        text-align: left;
    }
    
    .menu ul .subMenu:hover ul {
        display: none;
        position: static;
    }
    
    .menu a {
        padding-left: 0;
        transition: all 1s;
    }
    
    .menu a:hover {
        padding-left: 10%;
    }
    
    #btnMenu:checked ~ .menu {
        transform: translateX(0%);
    }
    
    main {
        margin-top: 80px;
    }
}

Jquery
Este código va dentro de una archivo con extensión .js

$(".subMenu").click(function(){
    $(this).children("ul").slideToggle();
})

$("ul").click(function(prop){
    prop.stopPropagation();
})

Resultado Final
Visualización en un tamaño móvil pantalla de 480px.

Visualización en un tamaño de una tableta pantalla de 768px.

Visualización en un tamaño de un navegador de escritorio de 1024px.