spec.html

<style>
  .center {
    margin-top: 50%;
    margin-left: 50%;
  }
  #link-01 {
    display: inline-block;
    margin-top: 30px;
  }
  #link-02 {
    display: inline-block;
    margin-top: 35px;
  }
  #test-container-01 ul {
    list-style-type: none;
  }
  #test-container-01 ul, #test-container-01 ul li {
    margin: 0;
    padding: 0;
    display: inline;
  }
  #test-container-01 ul li {
    padding: 3px 2px;
  }
</style>
  <ul id="test-container-01">
    <li><a href="">Link1</a></li>
  </ul>

<div class="note">
</div>
<div class="note">
</div>
<div class="note">
</div>
<div class="note">
</div>

<ul class="tipnav">
  <li><a href="">Link1</a></li>
  <li><a href="">Link2</a></li>
  <li><a href="">Link4</a></li>
</ul>
<ul class="tipnav">
  <li><a href="">Link2</a></li>
  <li><a href="">Link3</a></li>
  <li><a href="">Link4</a></li>
</ul>
<ul class="tipnav">
  <li><a href="">Link1</a></li>
  <li><a href="">Link3</a></li>
</ul>
<div>
  <a href="#" id="link-01" class="center">Hover here to show tipnav 01</a>
</div>
<div>
  <a href="#" id="link-02" class="center">Action element for multiple tipnavs</a>
</div>