<ul id="nav">
      <li class="selected"><a href="#">請選擇</a></li>
      <li><a href="http://google.com">Google</a></li>
      <li><a href="demo.html">Demo page</a></li>
      <li><a href="http://bing.com">Bing</a>
        <ul>
          <li><a href="http://google.com">Google</a>
            <ul>
              <li><a href="http://google.com">map</a></li>
              <li><a href="http://google.com">gmail</a></li>
            </ul>
          </li>
          <li><a href="demo.html">Demo page</a></li>
          <li><a href="http://bing.com">Bing</a></li>
          <li><a href="http://yahoo.com">Yahoo</a></li>
        </ul>
      </li>
      <li><a href="http://yahoo.com">Yahoo</a></li>
    </ul>
/* styles for desktop */
 .tinynav,.selected { display: none }
  /* styles for mobile */
@media screen and (max-width: 600px) {
.tinynav,.selected { display: block }
 #nav{ display: none }
 $(function () {
      // TinyNav.js 1
      $('#nav').tinyNav({
        active: 'selected',
        indent: '-'
      });
      
  });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/TinyNav.js/1.2.0/tinynav.min.js