dropdown-example/index.html at master · Habenzy/dropdown-example · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="style.css" rel="stylesheet" />
</head>

<body>
  <nav>
    <div id="drop-container">
      Drop Down Menu
      <div id="drop-content" style="display: none;">
        <div id="link-list">
          <a href="">Home</a>
          <a href="https://www.eventbrite.com/d/vt--burlington/races/">Off to the races</a>
          <a href="https://www.placecage.com/">Fantastic Photos</a>
          <a href="https://www.dndbeyond.com/">Beyond D&D</a>
          <a href="other.html">nextpage</a>
        </div>
      </div>
    </div>
  </nav>

  <div>
    <img src="https://www.placecage.com/500/600" />
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare massa nisi. Sed a magna ut urna posuere
      accumsan ut quis ante. Fusce maximus sapien iaculis massa vestibulum vulputate. Pellentesque vel tellus in mi
      vehicula pretium in aliquam tellus. Vestibulum ultricies tortor risus, vel tempus ante auctor facilisis. Vivamus
      quis nunc ante. Sed pharetra purus at nulla iaculis, sed vestibulum ante ornare.</p>
  </div>

  <div>
    <img src="https://www.placecage.com/200/300" />
    <p>Pellentesque posuere vulputate libero id dapibus. Sed euismod nec est ut imperdiet. Integer tincidunt arcu at
      risus euismod iaculis. Pellentesque at sapien semper, convallis purus non, commodo tellus. Curabitur iaculis nulla
      et enim vehicula, eget consequat urna vehicula. Praesent sed tincidunt metus. Mauris ultrices nisl ac nulla
      tempus, ut elementum nunc maximus. Ut et est dignissim, aliquet elit vitae, elementum purus. Nunc et tellus
      libero. Etiam ut volutpat quam. Curabitur id lorem dignissim, interdum risus eu, vestibulum felis. Quisque in
      magna erat. Fusce venenatis leo diam, facilisis pellentesque sem aliquam ut.</p>
  </div>

  <div>
    <img src="https://www.placecage.com/c/200/300" />
    <p>Maecenas auctor erat vitae metus accumsan commodo. Nullam varius diam cursus fermentum finibus. Vestibulum ante
      ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam metus augue, dictum eget arcu quis,
      dignissim semper velit. Nunc vel malesuada nulla. Curabitur efficitur sem nec purus sagittis laoreet. Aenean at
      pharetra eros. Phasellus in nulla pellentesque, sollicitudin felis ac, consectetur erat. Nunc aliquet metus vel
      congue faucibus. Vestibulum pellentesque risus ligula. Maecenas vitae nisi lorem. Praesent faucibus varius mauris,
      consectetur laoreet nisi euismod non. Sed id orci massa. Maecenas ornare magna et eros laoreet tincidunt. Nam
      ullamcorper et nunc nec mollis.</p>
  </div>

  <script src="main.js"></script>
</body>

</html>