[SOLVED] FAB produces 'phantom' Action


I am using the code below for an FAB; when I tap on ‘Navigate’ I get FIVE Action buttons- the phantom one is unlabelled - how can I get rid of this?

  • <a href="#" >
  •   <i class="icon f7-icons ios-only">add</i>
  •   <i class="icon material-icons md-only">add</i>
  •   <div class="fab-text">Navigate</div>
  •   	<div class="fab-buttons fab-buttons-right">
  •   		<a href="index.html" class="tab-link external fab-label-button">
  •   		  <span>1</span>
  •   		  <span class="fab-label">Home</span>
  •   		</a>
  •   		<a href="advice.html" class="tab-link external fab-label-button">
  •   		  <span>2</span>
  •   		  <span class="fab-label">Advice</span>
  •   		</a>
  •   	     <a href="about.html" class="tab-link external fab-label-button">
  •   	       <span>3</span>
  •   	       <span class="fab-label">About</span>
  •   	     </a>
  •   	     <a href="#" class="tab-link panel-open data-panel="right" tab-link external fab-label-button">
  •   	       <span>4</span>
  •   	       <span class="fab-label"> Help </span>
  •   	     </a>
  •   	   </div>



moved the</a> to before the line:

<div class="fab-buttons fab-buttons-right">