title: How can I add an arrow down icon next to nav bar and make pages drop down menu?
body: <p>I was wondering how I could implement an arrow down icon next to the navigation bar text "About Me" and "Units".</p>
  
  <p>In addition, how could I also make these two pages drop down menus? Below within my code I didn't make them drop down menus due to me not knowing how to make them a drop down menu. </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Liam Docherty | London Web Developer &amp;amp; GFX designer&lt;/title&gt;
        &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
        &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
    &lt;/head&gt;
  &lt;style&gt;
          body{
            margin: 0;
            padding: 0;
          }
          header{
            height: 10vh;
            background-color: #4D5061;
          }
          nav ul{
            list-style-type: none;
            overflow: hidden;
            text-align: center;
      }
          nav ul li a{
            display: inline-block;
            padding: 3.5vh 8px 4px;
            color: white;
            text-decoration: none;
            font-size: 14pt;
            font-family:'Roboto', sans-serif;
          }
          nav ul li { 
            padding-bottom:6px;
            position:relative;
            display: inline-block;
          }
          nav ul li:after {
            content:'';
            position:absolute;
            right:50%;
            bottom:0;
            left:50%;
            height:3px;
            background-color:red;
            border-radius:9px;
            transition:all .2s;
          }
            nav ul li:hover:after {
            right:0;
            left:0;
          }
            a:hover { color:red; 
          }
          #logo{
            padding-top: 2vh;
            padding-left: 20px;
            float: left;
          }
          section{
            position:relative;
          }
          .section1{
            height:93vh;
            background-color: #FFFFFF;
            text-align: center;
          }
          .section2{
            height:93vh;
            background-color: #A59E8C;
            text-align:center;
            color:white; 
            padding-top:23vh;
          }
          .contact_section{
            height:93vh;
            background-color: grey;
          }
          .hero{
            height:750px;
          }
          h1{
            font-family:'Roboto', sans-serif;
            color: white;
          }
          .container-fluid{
            padding: 60px 50px;
          }
          .bg-grey{
            background-color: #f6f6f6;
          }
          .logo-small{
            color: #000000;
            font-size: 50px;
          }
          .logo{
            color: #000000;
            font-size: 200px;
          }
          @media screen and (max-width: 768px){
            .col-sm-4 {
            text-align: center;
            margin: 25px 0;
          }
          .fa-angle-down{
            color: #4D5061;
          }
          footer{
            height:10vh;
          }
      &lt;/style&gt;
    &lt;body&gt;
          &lt;header&gt;
            &lt;div id="logo"&gt;
              &lt;img src="http://placehold.it/60x60" alt=""&gt;&lt;/div&gt;
            &lt;nav&gt;
                &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;About Me&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Units&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Clients&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#contact-me"&gt;Contact Me&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/nav&gt;
          &lt;/header&gt;
          &lt;section class="section1"&gt;
  
  
              &lt;div class="hero"&gt;&lt;/div&gt;
  
              &lt;i class="fa fa-angle-down" style="font-size:100px;"&gt;&lt;/i&gt;
  
          &lt;/section&gt;
          &lt;section class="section2"&gt;
              &lt;div class="banner"&gt;
                  &lt;h1&gt;What I can offer you&lt;/h1&gt;
                  &lt;p&gt; Feel free to contact me regarding any  &lt;/p&gt;
                  &lt;div class="container-fluid text-center"&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="col-sm-4"&gt;
                               &lt;span class="glyphicon glyphicon-off logo-small"&gt;&lt;/span&gt;
                               &lt;h4&gt;Availability&lt;/h4&gt;
                               &lt;p&gt;You can expect a response with 24 hours of the sent message. &lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/section&gt;
          &lt;section id="contact-me" class="contact_section"&gt;
  
          &lt;/section&gt;
    &lt;/body&gt;
    &lt;footer&gt;
    &lt;/footer&gt;
  &lt;/html&gt;
  </code></pre>