<!DOCTYPE html>
<html>
<html>
<head>
<style type="text/css">
  body{
    margin-left:0px;
    margin-right:0px;
    margin-top:40px;
    margin-bottom:0px;
  }
  
div { 
  list-style-type:none;
  display: block;
  float:center;
  padding:0;
  width:100%;/*width of menu */
  height:40px;
  text-align:center;
  line-height:3px;/*height of highlight -menu items*/
}
#menu{
    height:40px;/*height of menu - changes position of picture if change this number - makes picture go up if this value goes down*/
    background-color:white;
    left-margin:float;
 }
#menu ul {
    margin: 0;
    padding:0;
    margin-left:7%;/*control space to left and right of menu categories*/
    margin-right:7%;/*moves the picture*/
    text-align:center;
  
  }
#menu li {
    list-style-type:none;/*removes bullets*/
    float:left;/*puts them horizontal*/
    display:block;
    text-align:center;
    font-family:Arial;
    font-size:17px;
    padding:30px;/*space between categories*/
  }
#menu li a {
    text-decoration:none;
    color:#112e51; /*Font color*/
  }
  #menu li:Hover {
    color:white;
    background-color:#CCC; /*hover color*/
  }
  
</style>
</head>
<body>

  
<div id="menu">
  <ul>
    <center>
    <li><a href="#">WELCOME</a></li>
    <li><a href="#">CAREER</a></li>
    <li><a href="#">CONNECT</a></li>
    <li><a href="#">ESSENTIALS</a></li>
    <li><a href="#">SUPERVISOR'S TOOLKIT</a></li>
      <li><a href="#">GET STARTED</a></li>
      <li><a href="#">FAQ</a></li>
      <li><a href="#">LOCATE MY PIER</a></li>
      <p style="color:white;">x</p>   
      <p style="color:white;">x</p>
      <p style="color:white;">x</p>
      <p style="color:white;">x</p>
    </center>
    <center><a href="#" style="text-align:center;"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3144253/FAQfromthepier.jpg" border="0" style="top-margin:450;"> </a></center>  
  </ul>
</div>


  <style>
  table {  
   background-color:#01366A !important;
   /*background-color:#f4f4f4 !important;*/
  }  
  
  table, th, {  
    border: 1px solid #01366A;  
    border-collapse: collapse;  
  }  
</style>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br> 
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
  <br>
<br>
<br>
<br>
<br> 
<br>
<br>
<br>
<br>

<table style="width:100%">
   <tr>
    
    <th><a href="https://www.facebook.com"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3144253/facebook.png" border="0" style='Socialmediaicons'> </a>
    <th><a href="https://www.youtube.com"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3144253/youtube.png" border="0" style='Socialmediaicons'> </a>
    <th><a href="https://www.twitter.com"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3144253/twitter.png" border="0" style='Socialmediaicons'> </a>
    <th><a href="https://www.linkedin.com"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3144253/linkedin.png" border="0" style='Socialmediaicons'> </a>  
    <th><a href="https://www.fusion.com"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3144253/fusionicon.jpg" border="0" style='Socialmediaicons'> </a>
<th>&nbsp</th>
<th>&nbsp</th>
<th>&nbsp</th>
<th>&nbsp</th>
<th>&nbsp</th>
<th>&nbsp</th>
<th>&nbsp</th>
<th>&nbsp</th>
<th>&nbsp</th>
<th>&nbsp</th>
<th>&nbsp</th>
<th>&nbsp</th>
<th>&nbsp</th>
<th>&nbsp</th>
<th>&nbsp</th>
<th>&nbsp</th>
<th>&nbsp</th>
<th>&nbsp</th>
<th>&nbsp</th>
<th>&nbsp</th>
<th>&nbsp</th>
<th>&nbsp</th>
<th>&nbsp</th>
<th>&nbsp</th>
<th>&nbsp</th>
<th>&nbsp</th>
<th>&nbsp</th>
<th>&nbsp</th>
<th>&nbsp</th>
<th>&nbsp</th>
<th>&nbsp</th>
<th>&nbsp</th>
<th>&nbsp</th>
     <th><h3><a href="#"  id="myCustomTrigger" class='Subfeedback'> Submit Feedback</a></h3></th>
     <th><a href="IHEOD Site Map" class='Smap' >Site Map </a></h3> </th>
<th>&nbsp</th>
<th>&nbsp</th>
  </tr>
  </table>
<br>


 
  
</body>
</html>
  table {  
   background-color:#01366A !important;
   /*background-color:#f4f4f4 !important;*/
  }  
  
  table, th, {  
    border: 1px solid #01366A;  
    border-collapse: collapse;  
  }  
.Subfeedback  {
  /*float:left !important;*/
  float:right !important;
  color:white !important;
  text-decoration: none !important;
  font-family:"Arial" !important;
   font-size:19px !important;
   border:none !important;
   /*margin-top: 20px;*/
    /*margin-bottom:20px;*/
   margin-top:40px;
   margin-bottom:40px;
}
.Subfeedback:active {  
   background-color:#01366A !important;  
   color:#939393 !important;  
   background-color:gray !important;  
}  
.Subfeedback:hover {  
  background-color:#01366A !important;    
  color:#939393 !important;  
}  

.Smap {
  float:right !important;
  font-family:"Arial" !important;
  color:white !important;
  text-decoration:none !important;
  font:Source Sans Pro !important;
   font-size:19px !important;
   border:none !important;
   margin-top: 45px;
    margin-bottom:40px;
  }
.Smap:active {  
   background-color:#01366A !important;  
   color:#939393 !important;  
   background-color:gray !important;  
}  
.Smap:hover {  
  background-color:#01366A !important;    
  color:#939393 !important;  
}  

.Socialmediaicons  {
  float:left !important;
  text-decoration: none !important;
   border:none !important;
   margin-top: 40px;
    margin-bottom:38px;
    height:50px;
    width:50px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.