A mimic of the Bloomberg dropdown menu widget without JavaScript

<input id=bmenu_toggle type=checkbox name=bmenu-open class=hidden>
<label class="bmenu toggle" for="bmenu_toggle" accesskey="1">
  <header><span class="heavy">☰</span> Menu</header>
</label>
<div class="hide-at-start-wrapper">
  <nav class="bmenu panel animated">
    <a href="#"><span class="triangle-origin">Home</span></a>
    <a href="#"><span class="triangle-origin">Markets</span></a>
    <a href="#"><span class="triangle-origin">Technology</span></a>
    <a href="#"><span class="triangle-origin">Politics</span></a>
    <a href="#"><span class="triangle-origin">Pursuits</span></a>
    <a href="#"><span class="triangle-origin">Opinion</span></a>
    <a href="#"><span class="triangle-origin">Businessweek</span></a>
    <hr>
    <a href="#"><span class="triangle-origin">Video</span></a>
    <a href="#"><span class="triangle-origin">Audio</span></a>
    <hr>
    <a class="no-panel" href="#">Newsletters</a>
    <a class="no-panel" href="#">Watchlist</a>
    <a class="no-panel" href="#">Subscribe</a>
    <a class="no-panel" href="#">Sign In</a>
    <article class="panel">
      <div class="column">
        <section class="titled-group">
            <header>Read</header>
            <a href="#">Wealth</a>
            <a href="#">Crypto</a>
            <a href="#">Hyperdrive</a>
            <a href="#">Prognosis</a>
            <a href="#">Climate Changed</a>
            <a href="#">Equality</a>
            <a href="#">Billionaires</a>
            <a href="#">Graphics</a>
            <a href="#">Sponsored Content</a>
        </section>
        <section class="titled-group">
            <header>Watch</header>
            <a href="#">The David Rubenstein Show</a>
            <a href="#">Brilliant Ideas</a>
            <a href="#">Inspire GO</a>
        </section>
      </div>
      <div class="column">
        <section class="titled-group">
            <header>Special Reports</header>
            <a href="#">Where to Invest $10,000</a>
            <a href="#">50 Companies to Watch in 2018</a>
            <a href="#">What's Inside All the iPhones</a>
        </section>
      </div>
    </article>
    <article class="panel">
      <div class="column">
        <section class="titled-group">
            <header>Read</header>
            <a href="#">Economics</a>
            <a href="#">Deals</a>
            <a href="#">Fixed Income</a>
            <a href="#">ETFs</a>
            <a href="#">Benchmark</a>
            <a href="#">Markets Magazine</a>
        </section>
        <section class="titled-group">
            <header>Watch</header>
            <a href="#">Daybreak</a>
            <a href="#">Surveillance</a>
            <a href="#">Markets</a>
            <a href="#">What'd You Miss</a>
        </section>
        <section class="titled-group">
            <header>Follow</header>
            <a href="#">Twitter</a>
            <a href="#">Facebook</a>
        </section>
      </div>
      <div class="column">
        <section class="titled-group">
            <header>Data</header>
            <a href="#">Stocks</a>
            <a href="#">Currencies</a>
            <a href="#">Commodities</a>
            <a href="#">Rates &amp; Bonds</a>
            <a href="#">Sectors</a>
            <a href="#">Economic Calendar</a>
        </section>
        <section class="titled-group">
            <header>Listen</header>
            <a href="#">Trillions</a>
            <a href="#">Odd Lots</a>
            <a href="#">Surveillance</a>
            <a href="#">Benchmark</a>
            <a href="#">P&amp;L</a>
        </section>
      </div>
    </article>
    <article class="panel">
      <div class="column">
        <section class="titled-group">
            <header>Read</header>
            <a href="#">Cybersecurity</a>
            <a href="#">Startups</a>
            <a href="#">AI</a>
            <a href="#">Mobile</a>
            <a href="#">Big Data</a>
            <a href="#">Cloud Computing</a>
            <a href="#">U.S.</a>
            <a href="#">Global</a>
        </section>
        <section class="titled-group">
            <header>Special Reports</header>
            <a href="#">The Elon Musk Tracker</a>
            <a href="#">Tesla Model 3 Tracker</a>
        </section>  
      </div>
      <div class="column">
        <section class="titled-group">
            <header>Watch</header>
            <a href="#">Gadgets with Gurman</a>
            <a href="#">Digital Defense</a>
            <a href="#">Bloomberg Technology TV</a>
            <a href="#">Studio 1.0</a>
        </section>
        <section class="titled-group">
            <header>Listen</header>
            <a href="#">Decrypted</a>
        </section>
        <section class="titled-group">
            <header>Follow</header>
            <a href="#">Twitter</a>
            <a href="#">Facebook</a>
        </section>
      </div>
    </article>
    <article class="panel">
      <div class="column">
        <section class="titled-group">
            <header>Read</header>
            <a href="#">2018 Women Candidates</a>
            <a href="#">Trump Tracker</a>
            <a href="#">Brexit Coverage</a>
            <a href="#">World Leaders on the Brink</a>
            <a href="#">2018 Pessimist's Guide</a>
        </section>
        <section class="titled-group">
            <header>Listen</header>
            <a href="#">Bloomberg Law</a>
        </section>
      </div>
      <div class="column">
        <section class="titled-group">
            <header>Subscribe</header>
            <a href="#">Balance of Power</a>
        </section>
        <section class="titled-group">
            <header>Follow</header>
            <a href="#">Twitter</a>
            <a href="#">Facebook</a>
        </section>
      </div>
    </article>
    <article class="panel">
      <div class="column">
        <section class="titled-group">
            <header>Read</header>
            <a href="#">Travel</a>
            <a href="#">Autos</a>
            <a href="#">Homes</a>
            <a href="#">Living</a>
            <a href="#">Culture</a>
            <a href="#">Style</a>
        </section>
        <section class="titled-group">
            <header>Special Reports</header>
            <a href="#">London Property Prices</a>
            <a href="#">New York Property Prices</a>
            <a href="#">How to Invest in Art</a>
            <a href="#">How to Spend Your Bonus</a>
        </section>
      </div>
      <div class="column">
        <section class="titled-group">
            <header>Watch</header>
            <a href="#">Made</a>
        </section>
        <section class="titled-group">
            <header>Follow</header>
            <a href="#">Twitter</a>
            <a href="#">Facebook</a>
            <a href="#">Intagram</a>
        </section>
      </div>
    </article>
    <article class="panel">
      <div class="column">
        <section class="titled-group">
            <header>Read</header>
            <a href="#">Editorials</a>
        </section>
        <section class="titled-group">
            <header>Follow</header>
            <a href="#">Twitter</a>
            <a href="#">Facebook</a>
        </section>
      </div>
      <div class="column">
        <section class="titled-group">
            <header>Listen</header>
            <a href="#">Masters in Business</a>
        </section>
        <section class="titled-group">
            <header>Subscribe</header>
            <a href="#">Bloomberg Opinion Today</a>
            <a href="#">Money Stuff</a>
            <a href="#">Ritholtz's Reads</a>
            <a href="#">Early Returns</a>
            <a href="#">Sparklines</a>
        </section>
      </div>
    </article>
    <article class="panel">
      <div class="column">
        <section class="titled-group">
            <header>Special Reports</header>
            <a href="#">Sooner Than You Think</a>
            <a href="#">The Year Ahead: 2018</a>
            <a href="#">The Bloomberg 50</a>
        </section>
        <section class="titled-group">
            <header>Watch</header>
            <a href="#">Hello World</a>
        </section>
      </div>
      <div class="column">
        <section class="titled-group">
            <header>The Magazine</header>
            <a href="#">Subscribe</a>
        </section>
        <section class="titled-group">
            <header>Follow</header>
            <a href="#">Twitter</a>
            <a href="#">Facebook</a>
            <a href="#">Instagram</a>
        </section>
      </div>
    </article>
    <article class="panel">
      <div class="column">
        <section class="titled-group">
            <header>Watch Live TV</header>
            <a href="#">US</a>
            <a href="#">Europe</a>
            <a href="#">Asia</a>
            <a href="#">Australia</a>
            <a href="#">Schedule+Shows</a>
        </section>
        <section class="titled-group">
            <header>Shows</header>
            <a href="#">Surveillance</a>
            <a href="#">Daybreak</a>
            <a href="#">Markets</a>
            <a href="#">What'd You Miss?</a>
            <a href="#">Bloomberg Technology</a>
            <a href="#">All Shows...</a>
        </section>
      </div>
      <div class="column">
        <section class="titled-group">
            <header>Series</header>
            <a href="#">QuickTake</a>
            <a href="#">Hello World</a>
            <a href="#">The Spark</a>
        </section>
        <section class="titled-group">
            <header>Follow</header>
            <a href="#">TicToc</a>
            <a href="#">YouTube</a>
            <a href="#">Twitter</a>
            <a href="#">Facebook</a>
        </section>
      </div>
    </article>
    <article class="panel">
      <div class="column">
        <section class="titled-group">
            <header>Bloomberg Radio</header>
            <a href="#">Listen Live</a>
            <a href="#">About Bloomberg Radio</a>
        </section>
        <section class="titled-group">
            <header>Podcasts</header>
            <a href="#">Decrypted</a>
            <a href="#">Odd Lots</a>
            <a href="#">Trillions</a>
            <a href="#">Benchmark</a>
            <a href="#">Masters in Business</a>
            <a href="#">Surveillance</a>
            <a href="#">P&amp;L</a>
            <a href="#">Business of Sports</a>
            <a href="#">Coast to Coast</a>
            <a href="#">Bloomberg Law</a>
            <a href="#">All Podcasts…</a>
        </section>
      </div>
    </article>
    <article class="panel">
      <div class="column">
        <section class="titled-group">
            <header>Read</header>
            <a href="#">Wealth</a>
            <a href="#">Crypto</a>
            <a href="#">Hyperdrive</a>
            <a href="#">Prognosis</a>
            <a href="#">Climate Changed</a>
            <a href="#">Equality</a>
            <a href="#">Billionaires</a>
            <a href="#">Graphics</a>
            <a href="#">Sponsored Content</a>
        </section>
        <section class="titled-group">
            <header>Watch</header>
            <a href="#">The David Rubenstein Show</a>
            <a href="#">Brilliant Ideas</a>
            <a href="#">Inspire GO</a>
        </section>
      </div>
      <div class="column">
        <section class="titled-group">
            <header>Special Reports</header>
            <a href="#">Where to Invest $10,000</a>
            <a href="#">50 Companies to Watch in 2018</a>
            <a href="#">What's Inside All the iPhones</a>
        </section>
      </div>
    </article>
  </nav>
</div>