Expandable Menu

by cleo_not_chloe

HTML

<div id="menu">

      <ul>
        <li class="menu-button">
          PHOTOS
        </li>

        <li class="menu-button">
        MATERIALS
        </li>

        <ul id="materials">
          <li class="submenu-title">YARN</li>
          <li class="submenu">1 skein Shibui <span style="font-style: italic; font-weight: 300;">Staccato</span></li>
          <li class="submenu">(70% superwash merino, 30% silk; 50g; 191yds / 175m)</li>
          <li class="submenu">Shown in "Trail"</li>
          <li class="submenu-title">HOOK</li>
          <li class="submenu">E / 3.5mm</li>
          <li class="submenu-title">NOTIONS</li>
          <li class="last-submenu">1 locking stitch marker</li>
        </ul>

        <li class="menu-button">
          GAUGE
        </li>

        <li class="menu-button">
          MEASUREMENTS
        </li>

        <li class="menu-button">
          TECHNIQUES
        </li>

        <li class="menu-button">
          ABBREVIATIONS
       </li>

        <li class="menu-button">
          SAVE EDITS
          <div>
            <textarea id="textarea"> Copy &amp; paste pattern here.</textarea>

            <button type="button" value="save" id="savebutton">SAVE FILE</button>
          </div>
        </li>

      </ul>

    </div>