无法创建水平菜单下拉答案

【问题标题】：not able to create horizontal menu drop down无法创建水平菜单下拉
【发布时间】：2017-05-30 03:05:41
【问题描述】：

我正在通过查看我拥有的图像来设计页面。我被困在菜单栏设计上，因为我无法弄清楚如何设计我的图像中的菜单栏。它应该与我的图像中的内容完全匹配。

这是我的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>

我在这里做错了什么？我还需要使用字体 aswesome 制作 Log in | Sign up（我已经在我的 jsfiddle 中导入了它的 css）和 GET COVERED 按钮。

【问题讨论】：

不确定，但我可以告诉你，即使你确实让它们显示，你也会在大多数视口上遇到问题，因为你使用了太多的绝对像素值进行布局。您应该尽可能使用相对单位。
.dropdown 和 .dropdown-content 都有 display: none，导致它们不出现。您可能想研究像Bootstrap's navbar template 这样的框架。您还在各处使用过多的绝对 top 和 left，这将导致严重的响应问题。
我的 css 有很多我还没有使用的东西，但我的 html 只有很少的东西。我还是个初学者，所以还在学习。使用我拥有的 html 及其相应的 css，他们有什么问题吗？如果是，你能告诉我这些是什么，我们可以解决它们的最佳方法是什么。这将帮助我弄清楚很多事情。

标签： javascript jquery html css

【解决方案1】：

前两个问题是：

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

你需要你的 img 浮动：left。

【讨论】：

好的，我试过了，但现在一切都乱了套。看看我更新的jsfiddle。我怎样才能正确对齐它们，一旦我点击它们，它就会在下面显示下拉菜单。不知何故，在我的页面刷新上，所有内容都显示出来了，我的意思是所有下拉元素。如果我单击它们，我只想显示它们。它的字体和字体大小也非常大，与我的图像不匹配。