javascript - 无法创建水平菜单下拉

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 |使用很棒的字体(我已经在我的 jsfiddle 中导入了它的 css)和 GET COVERED 按钮注册。

Answer 1

前两个问题是:

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

并且您需要您的 img float :向左。