<html lang="en">
  <head>
    <title>Miles Hairston "CSS Styling Nav, Section 3"</title>
    <meta charset="utf-8" />
  </head>
  
  <header>
    <h1>CSS Styling Navigation, Section 4<h1>
  </header>
  
  <main>
    <h2>Creating horizontal menus</h2>
    <p>This webpage will be demonstrating what I learned from this section and how to create a horizontal menus<br>I will be using pages from my portfolio as link examples</p>
    
    <h2>Menu Example:</h2>
    <nav class="cf">
      <ul>
        <li><a href="https://codepen.io/mhhairston/pen/MWbVZoK?editors=1100" title="Home page" class="current">Home</a></li>
        <li><a href="http://studentfolders.cascadia.edu/bit112/Miles_H_Hairston/aboutme.html" title="About me page">About me</a></li>
        <li><a href="http://studentfolders.cascadia.edu/bit112/Miles_H_Hairston/labs.html" title="My work page">My work</a></li>
        <li><a href="http://studentfolders.cascadia.edu/bit112/Miles_H_Hairston/reports_other.html" title="Reports page">Reports</a></li>
      </ul>
    </nav>
  </main>
   
</html>
.cf:before, .cf:after{
  content:"";
  display:table;
}
.cf:after{
  clear:both;
}
/*For IE 6/7 (trigger hasLayout)*/
.cf{
  zoom:1;
}

body{
  background: grey;
}

header{
  text-align:center;
}

nav{
  background:#a50000;
  height:2.3em;
}
ul, li{
  margin:0;
  padding:0;
  list-style:none;
  float:left;
}
ul{
  background:turquoise;
  height: 2em;
  width:100%
}
li a{
  display:block;
  line-height:2em;
  padding: 0 1em;
  color:white;
  text-decoration:none;
}
li a:hover{
  background-color: purple;
  height:2em;
  padding-top:.3em;
  position:relative;
  top:-.3em;
  border-radius:.3em .3em 0 0;
}
.current, a:hover.current{
  background: darkblue;
  color: lightgrey;
  padding-top:.3em;
  position:relative;
  top:-.3em;
  border-radius:.3em .3em 0 0;
  border-bottom: .3em solid	#590000;
  cursor:default;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.