<body>
  <nav id="primary_nav_wrap">
<ul>
  <li class="current-menu-item"><a href="index.html">Home</a></li>
  <li><a href="#">Updates</a>
  <li><a href="freecode.html">Free Code</a>
    <ul>
      <li><a href="freehtml.html">Free HTML</a></li>
      <li><a href="freecss.html">Free CSS</a></li>
      <li><a href="freejava.html">Free JavaScript</a></li>
    </ul>
  </li>
  <li><a href="#">About Me</a>
    <ul>
      <li class="dir"><a href="history.html">History</a></li>
      <li class="dir"><a href="other.html">Other work</a>

        <ul>
          <li><a href="#">Category 1</a></li>
          <li><a href="#">Category 2</a></li>
          <li><a href="#">Category 3</a></li>
          
        </ul>
      </li>
<!--
      <li><a href="#">Sub Menu 3</a></li>
      <li><a href="#">Sub Menu 4</a></li>
      <li><a href="#">Sub Menu 5</a></li>
-->
    </ul>
  </li>
<!--
  <li><a href="#">Menu 4</a></li>
  <li><a href="#">Menu 5</a></li>
  <li><a href="#">Menu 6</a></li>
-->
  <li><a href="#">Contact</a></li>
</ul>
</nav>
    <center>
<br><br><br><br>
<table>
<tr>
<th> <div> Hello! <br>
      This website is by <br>
      <a href="#">Brandon Loehlein.</a></div> </th>
</tr>
</table>
<br>
<hr class="small">
<br>
<table>
<tr>

  <th> <div> This website is <br>
      for free code and things involving code.<br>
      </div> </th>

</tr>
</table>
<br>
<hr class="small">
<br>
<table>
<tr>

  <th> <div> Please, pick an area <br>
        To explore in the menu, and enjoy your stay.
      </div> </th>

</tr>
</table>
<br><br>


</body>

body {background: #222326; 
  font-family: 'Lato', sans-serif;}

#primary_nav_wrap ul
{
left: 0px;
top: 0px;
  list-style:none;
  position: fixed;
background: #121314;
color: white;
  margin:0;
  padding:0
display: inline-table;
width: 100%;
}

#primary_nav_wrap ul a
{

  display: block;
  color: #9C9C9C; 
  text-decoration:none;
  font-weight:700;
  font-size: 22px;
  line-height:32px;
  padding: 15px 15px;
  background: #121314;
  font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;
      -webkit-transition: all 150ms linear;
-moz-transition: all 150ms linear;
-ms-transition: all 150ms linear;
-o-transition: all 150ms linear;
transition: all 150ms linear;
}

#primary_nav_wrap ul a:hover
{

  color: white;
background-color: #2d2f33; 
text-shadow: 0 0 2px white;
-webkit-text-shadow: 0 0 2px white;
-moz-text-shadow: 0 0 2px white;
-o-text-shadow: 0 0 2px white;
-ms-text-shadow: 0 0 2px white;
  -webkit-transition: all 150ms linear;
-moz-transition: all 150ms linear;
-ms-transition: all 150ms linear;
-o-transition: all 150ms linear;
transition: all 150ms linear;
}

#primary_nav_wrap ul a:active
{

  color: #8ABF29;
background-color: #2d2f33; 
    -webkit-transition: all 50ms linear;
-moz-transition: all 50ms linear;
-ms-transition: all 50ms linear;
-o-transition: all 50ms linear;
transition: all 50ms linear;
}

#primary_nav_wrap ul li
{
  position:relative;
  float:left;
  margin:0;
  padding:0
background: #121314;
}

#primary_nav_wrap ul li.current-menu-item
{
  background-color: #222326; 
}

#primary_nav_wrap ul li:hover
{
  background-color: #222326; 
  
  
}

#primary_nav_wrap ul ul
{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  background: #121314;
  padding:0;
}

#primary_nav_wrap ul ul li
{
  float:none;
  width:200px
    
}

#primary_nav_wrap ul ul a
{
  line-height:120%;
  padding:10px 15px
  background: #121314; 
  
}


#primary_nav_wrap ul ul ul
{
  top:0;
  left:100%

}

#primary_nav_wrap ul li:hover > ul
{
  display:block

}

div {
color: #9C9C9C;
font-size: 22px;
box-shadow: inset 0 0 0 #222326;
-webkit-box-shadow: inset 0 0 0 #222326;
-moz-box-shadow: 0 0 0 #222326;
-o-box-shadow: 0 0 0 #222326;
-ms-box-shadow: 0 0 0 #222326;
padding: 20px;
-moz-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-ms-transition: all 300ms linear; 
-o-transition: all 300ms linear;
transition: all 300ms linear;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}

div:hover {
font-size: 22px;
color: white;
-webkit-box-shadow: inset 0 0 20px black;
box-shadow: inset 0 0 20px black;
-moz-box-shadow: inset 0 0 20px black;
-o-box-shadow: inset 0 0 20px black;
-ms-box-shadow: inset 0 0 20px black;
padding: 20px;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-ms-transition: all 300ms linear; 
-o-transition: all 300ms linear;
transition: all 300ms linear;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}

a {color: #9c9c9c;
-webkit-transition: all 100ms linear;
-moz-transition: all 100ms linear;
-ms-transition: all 100ms linear; 
-o-transition: all 100ms linear;
transition: all 100ms linear;}

a:hover {color: white;
-webkit-transition: all 100ms linear;
-moz-transition: all 100ms linear;
-ms-transition: all 100ms linear; 
-o-transition: all 100ms linear;
transition: all 100ms linear;
}

th.dash {color: white;
font-size: 16px;
}

.verticalLine {
    border-left: thick solid #ff0000;
}

hr.small {
width: 300px;
border-color: #8ABF29;
}
/*
hr.small:hover {
width: 300px;
border-color: #3498db;
}
*/ 
/* Tested and works in Chrome, Safari, Internet Explorer and Firefox. Not tested on Opera. 
Credit to Phil Hoyte (found at https://codepen.io/philhoyt), as I used his pure css drop down menu as a base but changed several things around to work as a solid fixed menu with hover changes and color. */

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.