无法创建水平菜单下拉
问题描述:
我正在设计一个页面,通过查看我的图片。我被困在菜单栏设计上,因为我无法弄清楚如何设计菜单栏,就像我在图像中一样。它应该与我的形象完全匹配。无法创建水平菜单下拉
我试图创建水平菜单栏中显示的图像,但不知何故我的菜单根本没有显示。看起来他们隐藏在某个地方。这里是我的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(并且我已经在我的jsfiddle中导入了它的css)和GET COVERED
按钮以及Log in | Sign up
。
答
第2个问题是:
.dropdown {
display: none; /* get rid of this */
}
,你需要你的IMG浮动:左侧。
+0
好吧,我尝试过,但一切都是现在干的。看看我更新的[jsfiddle](https://jsfiddle.net/2nv4dd2w/4/)。我怎样才能正确对齐它们,一旦我点击它们就会显示下面的下拉菜单。不知何故,在我的页面刷新一切都显示,我的意思是所有的下拉元素。我只想向他们展示,如果我点击它们。它的字体和字体也很大,与我在图片中的字体不匹配。 – vader
不确定,但我可以告诉你,即使你让它们显示,你也会在大多数视口上遇到问题,因为你正在为布局使用如此多的绝对像素值。你应该尽可能地使用相对单位。 –
'.dropdown'和'.dropdown-content'都有'display:none',导致它们不出现。您可能希望查看像[** Bootstrap的导航栏模板**](https://getbootstrap.com/examples/navbar-fixed-top/)这样的框架。你还会在整个地方使用过多的绝对“顶”和“左”,这会导致严重的响应问题。 –
我的CSS有很多我还没有使用的东西,但我的HTML只有很少的东西。我仍然是初学者,所以仍然在学习东西。有了我的HTML和我的对应的CSS,他们有任何问题吗?如果是的话,你能告诉我这些是什么,以及我们能够解决这些问题的最佳方式是什么。这将帮助我弄清楚很多事情。 – vader