水平メニューのドロップダウンを作成できません

Question

私は画像を見ながらページをデザインしています。私は私のイメージのように私がメニューバーを設計する方法を理解することができないので、私はメニューバーのデザインに固執しています。それは私のイメージにあるものと正確に一致するはずです。

ここに私のjsfiddleがあります。私が複製しようとしている私のimageです。

私はそのイメージに示されているように水平メニューバーを作成しようとしましたが、どういうわけか私のメニューは全く表示されません。彼らはどこかに隠されているようだ。ここに私のHTMLコードがあります：

<div class="topnav"> 
    <img src="https://s4.postimg.org/ojd13poal/northman_wordmark_CMYK.png"> 
    <nav> 
     <ul> 
      <li class="dropdown"> 
       <a href="#"><b>PROGRAMS</b> <i class="fa fa-angle-down"></i></a> 
       <ul class="dropdown-content"> 
        <li><a href="#"><i>INDIVIDUAL</i></a> 
        </li> 
        <li><a href="#"><i>CORPORATE</i></a> 
        </li> 
       </ul> 
      </li> 
      <li class="dropdown"> 
       <a href="#"><b>WORLD OF NORTHMAN</b> <i class="fa fa-angle-down"></i></a> 
       <ul class="dropdown-content"> 
        <li><a href="#"><i>BE EXTRODINARY</i></a> 
        </li> 
        <li><a href="#"><i>RISK & REWARD</i></a> 
        </li> 
        <li><a href="#"><i>BLOG</i></a> 
        </li> 
        <li><a href="#"><i>OUR STORY</i></a> 
        </li> 
       </ul> 
      </li> 
     </ul> 
    </nav> 
</div> 

<div class="header"> <img class="header-background" src="https://s3.postimg.org/yr4kr8v0j/kaestle-chris-davenport-antarktis-2009-04.png"> <img class="orange-bar" src="https://s23.postimg.org/od4umnehn/orange-bar.png"> 
    <h1 class="text-inside-orange">INSURANCE FOR THE WILD</h1> 
</div> 

私はここで何をしていますか？また、Log in | Sign upフォントをaswesome（私は既にjsfiddleでCSSをインポートしています）とGET COVEREDボタンを使用して作成する必要があります。

.dropdown { 
    display: none; /* get rid of this */ 
} 

、あなたが浮いているように、あなたのimgを必要とする：

Answer 1

最初の2つの問題がある左。