Menu with preloaded content

Simple horizontal menu using psuedo-class hover and block float left and pre-loaded but hidden content.

HTML

<!-- Simple Menu with Pre-Loaded Content -->
<!-- Curtin Univeristy                   -->
<!-- School of Information Systems       -->
<!-- Businsess Web Technologies ISYS3004 -->

<header>
  <h1>Welcome to the BWT Pet Store</h1>
</header>

<div id="menu">
  <div onclick="loadContent('fish')"> Fish </div>
  <div onclick="loadContent('dog')"> Dog </div>
  <div onclick="loadContent('cat')"> Cat </div>
</div>

<div id="content">

  <div id="fish">
    <h2> Goldfish </h2>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e9/Goldfish3.jpg/560px-Goldfish3.jpg" , alt="picture of a goldfish" />
    <a href="https://commons.wikimedia.org/wiki/File:Goldfish3.jpg">Image License</a>
    <p> You will find information about goldfish on this page.</p>
  </div>

  <div id="dog">
    <h2> Dog </h2>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8c/Poligraf_Poligrafovich.JPG/483px-Poligraf_Poligrafovich.JPG" />
    <a href="https://commons.wikimedia.org/wiki/File:Poligraf_Poligrafovich.JPG"> Image License</a>
    <p> Dogs are on this page.</p>
  </div>

  <div id="cat">
    <h2> Cat </h2>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bb/Kittyply_edit1.jpg/320px-Kittyply_edit1.jpg">
    <a href="https://commons.wikimedia.org/wiki/File:Kittyply_edit1.jpg"> Image License</a>
    <p> This is all about cats.
    </p>
  </div>
</div>

CSS

#fish {
  display: block;
}

#dog {
  display: block;
}

#cat {
  display: block;
}

#content img {
  position: relative;
  margin-left: 200px;
  width: 256px;
}

body {
  border: 0px;
  margin: 0px;
  padding: 0px;
}

header {
  width: 100%;
}

#menu {
    position: absolute;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
}

#menu div {
  position: relative;
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

JavaScript

// Function to display pre-loaded content
function loadContent(idName) {
  document.getElementById("dog").style.display = "none";
  document.getElementById("cat").style.display = "none";
  document.getElementById("fish").style.display = "none";
  document.getElementById(idName).style.display = "block";
}