JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/dark-hive/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<div class="big-header">
  <ul>
    <li>
      <a href="#">Page 1</a>
    </li>
    <li>
      <a href="#">Page 2</a>
    </li>
    <li>
      <a href="#">Page 3</a>
    </li>
  </ul>
</div>
<div class="little-header">
   <ul> <!--  these are only the children of the parent site (page 1) above -->
    <li>
      <a href="#">Sub Page 1.1</a>
    </li>
    <li>
      <a href="#">Sub Page 1.2</a>
    </li>
    <li>
      <a href="#">Sub Page 3.3</a>
    </li>
  </ul>
</div>

CSS

.big-header{
  
}

.little-header{
  /* display:none; */
}