title: not able to create horizontal menu drop down
body: <p>I am working on designing a page by looking at the image I have. I am stuck on the menu bar design as I am not able to figure out how can I design the menu bar like I have in my image. It should exactly match with what I have in my image.</p>
  
  <p>Here is my <a href="https://jsfiddle.net/2nv4dd2w/1/" rel="nofollow noreferrer">jsfiddle</a> and here is my <a href="https://s10.postimg.org/g3iy7hrsp/nm1.png" rel="nofollow noreferrer">image</a> which I am trying to replicate.</p>
  
  <p>I tried creating horizontal menu bar as shown in that image but somehow my menus are not showing at all. It looks like they are hidden somewhere. Here is my HTML code:</p>
  
  <pre><code>&lt;div class="topnav"&gt;
      &lt;img src="https://s4.postimg.org/ojd13poal/northman_wordmark_CMYK.png"&gt;
      &lt;nav&gt;
          &lt;ul&gt;
              &lt;li class="dropdown"&gt;
                  &lt;a href="#"&gt;&lt;b&gt;PROGRAMS&lt;/b&gt; &lt;i class="fa fa-angle-down"&gt;&lt;/i&gt;&lt;/a&gt;
                  &lt;ul class="dropdown-content"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;&lt;i&gt;INDIVIDUAL&lt;/i&gt;&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;&lt;i&gt;CORPORATE&lt;/i&gt;&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li class="dropdown"&gt;
                  &lt;a href="#"&gt;&lt;b&gt;WORLD OF NORTHMAN&lt;/b&gt; &lt;i class="fa fa-angle-down"&gt;&lt;/i&gt;&lt;/a&gt;
                  &lt;ul class="dropdown-content"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;&lt;i&gt;BE EXTRODINARY&lt;/i&gt;&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;&lt;i&gt;RISK &amp; REWARD&lt;/i&gt;&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;&lt;i&gt;BLOG&lt;/i&gt;&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;&lt;i&gt;OUR STORY&lt;/i&gt;&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
  &lt;/div&gt;
  
  &lt;div class="header"&gt; &lt;img class="header-background" src="https://s3.postimg.org/yr4kr8v0j/kaestle-chris-davenport-antarktis-2009-04.png"&gt; &lt;img class="orange-bar" src="https://s23.postimg.org/od4umnehn/orange-bar.png"&gt;
      &lt;h1 class="text-inside-orange"&gt;INSURANCE FOR THE WILD&lt;/h1&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What is wrong I am doing here? Also I need to make <code>Log in | Sign up</code> using font aswesome (and I have already imported its css in my jsfiddle) and <code>GET COVERED</code> button as well.</p>