26_FollowAlongDropdown/followAlongDropdown.html

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="followAlongDropdown.css">
    <title>Follow Along Dropdown</title>
</head>
<body>
  <h2>Cool</h2>
  <nav class="top">
    <div class="dropdownBackground">
      <span class="arrow"></span>
    </div>
    <ul class="cool">
      <li>
        <a href="#">About Me</a>
        <div class="dropdown dropdown1">
          <div class="bio">
            <img src="https://unsplash.it/200/300">
            <p>Knock over christmas tree knock over christmas tree. Friends are not food bathe private parts with tongue then lick owner's face scream at teh bath. Gate keepers of hell scratch at fleas, meow until belly rubs, hide behind curtain when vacuum cleaner is on scratch strangers and poo on owners food and has closed eyes but still sees you fall over dead (not really but gets sypathy) or purr while eating, spend all night ensuring people don't sleep sleep all day yet vommit food and eat it again.</p>
          </div>
        </div>
      </li>
      <li>
        <a href="#">Wes Bos Courses</a>
        <ul class="dropdown courses">
          <li>
            <span class="code">RFB</span>
            <a href="https://ReactForBeginners.com">React For Beginners</a>
          </li>
          <li>
            <span class="code">ES6</span>
            <a href="https://ES6.io">ES6 For Everyone</a>
          </li>
          <li>
            <span class="code">STPU</span>
            <a href="https://SublimeTextBook.com">Sublime Text Power User</a>
          </li>
          <li>
            <span class="code">WTF</span>
            <a href="http://flexbox.io">What The Flexbox?!</a>
          </li>
          <li>
            <span class="code">LRX</span>
            <a href="http://LearnRedux.com">Learn Redux</a>
          </li>
          <li>
            <span class="code">CLPU</span>
            <a href="http://CommandLinePowerUser.com">Command Line Power User</a>
          </li>
          <li>
            <span class="code">MMD</span>
            <a href="http://MasteringMarkdown.com">Mastering Markdown</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">Other Links</a>
        <ul class="dropdown dropdown3">
          <li><a class="button" href="http://linkedin.com/in/barbarajoebstl">
          LinkedIn</a></li>
          <li><a class="button" href="https://tympanus.net/codrops/">Codrops</a></li>
          <li><a class="button" href="http://tschebee.net">Tschebee</a></li>
        </ul>
      </li>
    </ul>
  </nav>

    <script src="followAlongDropdown.js"></script>
</body>
</html>